React Lifecycle: Complex Effect Chain

Hard

Determine the call order in a complex effect chain with state changes. Question: What will be the complete order of console.log calls from mount to completion? Hints: • Effect can call setState, triggering re-render • On re-render, cleanup functions run first • Component may render multiple times in succession • Effects with different dependencies fire differently Acceptance Criteria: ✓ Correct order of ALL console.log calls ✓ Explanation of how many renders occur ✓ Explanation of which effects fire on each render ✓ Understanding of complex effect chains

React Lifecycle: Complex Effect Chain

Hard

Close file
Close file
import { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(1);

  console.log('Hack Frontend 1');

  useEffect(() => {
    console.log('Hack Frontend 2');

    return () => {
      console.log('Hack Frontend 3');
    };
  }, [count]);

  useEffect(() => {
    console.log('Hack Frontend 4');
    setCount((count) => count + 1);
  }, []);

  return <Child count={count} />;
}

function Child({ count }) {
  useEffect(() => {
    console.log('Hack Frontend 5');

    return () => {
      console.log('Hack Frontend 6');
    };
  }, [count]);

  return <div>Count: {count}</div>;
}

// Question: What is the COMPLETE order of console.log output?
// Your answer:
// 1. ?
// 2. ?
// 3. ?
// ... (continue)
// 
// How many times does the component render? ?
// Why? ?
// 
// Explanation: ?

Preview

Console