Quiz: Hooks Dependency Trap

Test Your Dependency Array Intuition

Dependency arrays look simple. They are not. Each question below involves a useEffect dependency array. Don't guess — trace the closure behavior, Object.is comparisons, and effect timing.

If you score below 6 out of 8, go back to the useEffect, stale closures, and useMemo lessons. These are the bugs that will eat your afternoon.

---

Question 1: The Missing Dependency

function Timer({ delay }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1);
    }, delay);
    return () => clearInterval(id);
  }, [delay]);

  return <p>{count}</p>;
}

---

Question 2: Object in Dependencies

function UserList({ filters }) {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers(filters).then(setUsers);
  }, [filters]);

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

// Parent:
function App() {
  return <UserList filters={{ role: 'admin', active: true }} />;
}

---

Question 3: Function in Dependencies

function SearchResults({ query }) {
  const [results, setResults] = useState([]);

  function fetchResults() {
    return fetch(`/api/search?q=${query}`).then(r => r.json());
  }

  useEffect(() => {
    fetchResults().then(setResults);
  }, [fetchResults]);

  return <div>{results.length} results</div>;
}

---

Question 4: Ref in Dependencies

function Component() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, [inputRef]);

  return <input ref={inputRef} />;
}

---

Question 5: Stable Dispatch

function TodoApp() {
  const [todos, dispatch] = useReducer(todosReducer, []);

  useEffect(() => {
    const saved = JSON.parse(localStorage.getItem('todos') || '[]');
    if (saved.length) {
      dispatch({ type: 'LOAD', todos: saved });
    }
  }, [dispatch]);

  return <TodoList todos={todos} dispatch={dispatch} />;
}

---

Question 6: Cleanup Timing

function Logger({ page }) {
  useEffect(() => {
    console.log(`Entered: ${page}`);

    return () => {
      console.log(`Left: ${page}`);
    };
  }, [page]);

  return <div>Page: {page}</div>;
}

// page changes: 'home' → 'about' → 'contact'

---

Question 7: Derived State Anti-pattern

function FilteredList({ items, query }) {
  const [filtered, setFiltered] = useState([]);

  useEffect(() => {
    setFiltered(items.filter(i => i.name.includes(query)));
  }, [items, query]);

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

---

Question 8: The Double Subscription

function Chat({ roomId }) {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    function handleMessage(msg) {
      setMessages(prev => [...prev, msg]);
    }

    const ws = new WebSocket(`wss://chat.example.com/${roomId}`);
    ws.addEventListener('message', handleMessage);

    return () => {
      ws.removeEventListener('message', handleMessage);
      ws.close();
    };
  }, [roomId]);

  return <MessageList messages={messages} />;
}

---

Scoring Guide