Chapter 7: React State & Lifecycle

1. State vs. Props: The Core Distinctions

Understanding the boundaries between state and props is critical to designing predictable software:

2. Deep Dive into `useState` Mechanics

The useState hook declares a state variable. It returns an array with exactly two elements: the current state value, and a dispatcher function to update it:

import { useState } from 'react';

function Counter() {
  // Array destructuring: [currentValue, setterFunction]
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Why Functional Updaters Are Crucial:

Consider what happens if you call setCount(count + 1) three times consecutively:

function BrokenIncrement() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1); // count is 0 => schedules count to be 1
    setCount(count + 1); // count is still 0 in this render scope => schedules count to be 1
    setCount(count + 1); // count is still 0 => schedules count to be 1
    // Final count after re-render: 1 (NOT 3!)
  }
  // ...
}

Because state updates are batched and count is a snapshot captured at render time, all three calls read the same value (0). To resolve this, use the functional updater form:

function FixedIncrement() {
  const [count, setCount] = useState(0);

  function handleClick() {
    // React passes the latest pending state to your updater function:
    setCount(prev => prev + 1); // prev = 0 => returns 1
    setCount(prev => prev + 1); // prev = 1 => returns 2
    setCount(prev => prev + 1); // prev = 2 => returns 3
    // Final count after re-render: 3!
  }
  // ...
}

3. Updating Objects and Arrays Immutably

In JavaScript, objects and arrays are reference types. If you modify an array using push() or an object viauser.name = 'Alex', the memory address does not change. React will compare prevObject === nextObject, conclude nothing changed, and skip re-rendering!

Updating Nested Objects with the Spread Operator:

const [user, setUser] = useState({
  name: "Alex",
  email: "alex@example.com",
  preferences: { theme: "dark", notifications: true }
});

// ✅ Correct: Clone the outer object AND the nested object
function updateTheme(newTheme) {
  setUser(prev => ({
    ...prev,
    preferences: {
      ...prev.preferences,
      theme: newTheme
    }
  }));
}

Immutable Array Mutation Patterns:

4. The Three Phases of the Component Lifecycle

Every React component journeys through three distinct lifecycle phases:

Mapping Lifecycle Phases to `useEffect`:

import { useEffect } from 'react';

function LifecycleTracker({ userId }) {
  useEffect(() => {
    // 1. MOUNTING: Runs once when component appears on screen
    console.log("Component mounted. Connecting WebSocket...");
    const socket = connectToChat(userId);

    // 3. UNMOUNTING: Runs when component is removed or before re-running effect
    return () => {
      console.log("Component unmounting. Disconnecting WebSocket...");
      socket.disconnect();
    };
  }, [userId]); // 2. UPDATING: Re-runs only if userId prop changes!

  return <div>Chat Active</div>;
}

Frequently Asked Questions (FAQ)