React Hooks Overview

What Are Hooks?

Hooks start with use — useState, useEffect, useContext, etc. Call them at the top level of function components or custom hooks, never inside loops, conditions, or nested functions.

The rules of hooks exist because React relies on call order to associate state with components. Breaking the rules causes bugs that are hard to diagnose.

function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

useState manages data; useEffect syncs with external systems like document.title.

Rules of Hooks

✓ Call hooks at top level of function components or custom hooks
✓ Call hooks in the same order every render

✗ Do not call hooks inside if/for/nested functions
✗ Do not call hooks in class components
✗ Do not call hooks in event handlers

• Only call hooks from React function components or custom hooks.
• ESLint plugin eslint-plugin-react-hooks enforces the rules automatically.
• Custom hooks extract reusable stateful logic — they call other hooks.
• Each hook solves a specific category: state, effects, memoization, context.

Built-in Hooks Overview

The hooks covered in this course and their roles.

Hooks vs Class Lifecycle

Hooks compose behavior vertically in one function instead of spreading it across lifecycle methods. Related logic stays together — fetch + cleanup in one effect instead of split across mount/unmount.

Custom Hooks Preview

When you find yourself copying the same state + effect combo, extract a custom hook like useLocalStorage or useFetch. Custom hooks share logic, not UI.

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return width;
}

Common Mistakes

• Calling hooks conditionally when a feature flag is false.
• Naming custom hooks without the use prefix.
• Using effects for everything instead of event handlers or derived state.
• Ignoring eslint-plugin-react-hooks warnings.

Key Takeaways

• Hooks add state and lifecycle features to function components.
• Follow the rules of hooks — top level, consistent order.
• Built-in hooks cover state, effects, refs, memoization, and context.
• Custom hooks extract reusable stateful logic.