🔄 Updating Phase

The updating phase occurs when a component's props or state change, triggering a re-render.

What Causes Updates

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

  // Updates triggered by:
  // 1. State change: setCount(count + 1)
  // 2. Prop change: userId prop changes
  // 3. Parent re-render: if parent updates, this component updates too

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

Update Process

1. State or props change detected
2. Component re-renders (function called again)
3. New JSX calculated
4. React compares old and new DOM
5. Only changed elements update in real DOM
6. useEffect dependencies checked
7. Cleanup functions from previous render run
8. New effects run

Effects That Respond to Updates

Watch for Specific Changes

function SearchUsers({ query }) {
  const [results, setResults] = React.useState([]);

  // Run when 'query' changes
  React.useEffect(() => {
    console.log("Searching for:", query);
    
    searchAPI(query).then(data => {
      setResults(data);
    });
  }, [query]); // Dependency array with 'query'

  return (
    <ul>
      {results.map(r => <li key={r.id}>{r.name}</li>)}
    </ul>
  );
}

React to Multiple Dependencies

function UserDataDisplay({ userId, includeDetails }) {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    // Run when userId OR includeDetails changes
    console.log("Fetching user data...");
    
    const url = includeDetails 
      ? `/api/users/${userId}/details`
      : `/api/users/${userId}`;
    
    fetch(url).then(r => r.json()).then(setData);
  }, [userId, includeDetails]); // Watch both dependencies

  return <div>{data?.name}</div>;
}

Common Update Patterns

Pattern 1: Form Validation

function EmailForm() {
  const [email, setEmail] = React.useState("");
  const [isValid, setIsValid] = React.useState(false);

  // Validate when email changes
  React.useEffect(() => {
    setIsValid(email.includes("@"));
  }, [email]);

  return (
    <div>
      <input 
        value={email} 
        onChange={(e) => setEmail(e.target.value)}
      />
      {isValid ? <p>Valid!</p> : <p>Invalid email</p>}
    </div>
  );
}

Pattern 2: Prop to State

function ColorDisplay({ defaultColor }) {
  const [color, setColor] = React.useState(defaultColor);

  // Sync internal state with prop changes
  React.useEffect(() => {
    setColor(defaultColor);
  }, [defaultColor]);

  return <div style={{ backgroundColor: color }} />;
}

Pattern 3: Synchronize with External State

function ChatWindow({ conversationId }) {
  const [messages, setMessages] = React.useState([]);

  React.useEffect(() => {
    // Load messages when conversation changes
    loadMessages(conversationId).then(setMessages);
  }, [conversationId]);

  return (
    <ul>
      {messages.map(m => <li key={m.id}>{m.text}</li>)}
    </ul>
  );
}

Dependency Array Rules

✅ Key Takeaways

• Updates happen when **props or state change**

• Use **dependency arrays** to control when effects run

• Effects run **after each update** matching their dependencies

• Always **include all dependencies** in the array

• Omit dependency array = runs after every render (usually not what you want)