React

1. What is State?

State is a component's internal memory. It holds data that can change over time based on user interactions (typing in an input, clicking a button, fetching server data) and whose modification causes React to automatically re-render the component with updated UI.

Why Regular Variables Fail Inside Components

// ❌ REGULAR VARIABLE (Does NOT trigger a re-render!):
function CounterBroken() {
    let count = 0; // Reset back to 0 on every render!

    function handleClick() {
        count++; // Variable changes, but React doesn't know to update the screen!
        console.log("Count:", count);
    }

    return <button onClick={handleClick}>Count: {count}</button>;
}

// ✅ REACT STATE (useState triggers reconciliation & persists across renders):
function CounterWorking() {
    const [count, setCount] = React.useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Count: {count}
        </button>
    );
}

2. The useState Hook Syntax

The useState hook is a built-in React function that returns an array with exactly two elements: [currentValue, setterFunction].

3. Handling Events in React (SyntheticEvent System)

React wraps native browser events in a cross-browser compatible SyntheticEvent wrapper with unified performance and event pooling features.

// ✅ Pass arguments via arrow function:
<button onClick={() => handleDelete(user.id)}>
    Delete
</button>

// ❌ WRONG: Executes immediately when rendered!
<button onClick={handleDelete(user.id)}>

4. State Immutability: Updating Objects and Arrays

React compares previous and new state by shallow reference equality (Object.is()). If you mutate an object or array in place (e.g. user.name = "Alex" or items.push(newItem)), its memory reference does not change, and React will skip re-rendering!

// 1. UPDATING AN OBJECT IN STATE:
const [user, setUser] = React.useState({ name: "Anshuman", role: "Dev", age: 22 });

// ❌ WRONG: Mutates state directly (No re-render!)
user.age = 23;
setUser(user);

// ✅ CORRECT: Copy existing properties with spread operator (...) and override changed fields:
setUser({
    ...user,
    age: 23
});

// 2. UPDATING AN ARRAY IN STATE:
const [todos, setTodos] = React.useState(["Learn JS", "Learn React"]);

// ❌ WRONG: Array.prototype.push mutates existing array:
// todos.push("Learn Redux");

// ✅ CORRECT: Return a brand-new array using spread:
setTodos([...todos, "Learn Redux"]);

// ✅ CORRECT FILTER (Deletion):
setTodos(todos.filter(todo => todo !== "Learn JS"));

5. Functional Updates & React 18 Automatic Batching

Functional State Updates: setCount(prev => prev + 1)

When your new state depends on the previous state value, always pass an updater callback: setCount(prev => prev + 1). This guarantees you are reading the most up-to-date state even during batched asynchronous updates:

function MultiCounter() {
    const [count, setCount] = React.useState(0);

    function handleTripleIncrement() {
        // ❌ WRONG: All 3 calls read the same snapshot value of `count` (0). Result is 1, not 3!
        // setCount(count + 1);
        // setCount(count + 1);
        // setCount(count + 1);

        // ✅ CORRECT: Updater function receives latest pending state:
        setCount(prev => prev + 1); // 0 -> 1
        setCount(prev => prev + 1); // 1 -> 2
        setCount(prev => prev + 1); // 2 -> 3 (Final Count: 3!)
    }

    return <button onClick={handleTripleIncrement}>+3 (Count: {count})</button>;
}

6. Top Interview Questions & Common Pitfalls

7. Hands-On Practice Challenges

Master state management, updater functions, and immutable updates with these coding challenges. Click "Solve Challenge" to open the editor!