Hooks

Hooks (introduced in React 16.8) are functions that let you use React features in functional components. They replace class component patterns with a simpler, more composable API.

Rules of Hooks

Two rules must be followed for hooks to work correctly:

1. Only call hooks at the top level — never inside loops, conditions, or nested functions. React relies on the order hooks are called to associate each hook with its state. Conditional calls break this ordering.
2. Only call hooks from React function components or custom hooks — never from regular JavaScript functions or class components.

The eslint-plugin-react-hooks enforces these rules automatically.

useState

const [value, setValue] = useState(initialValue) declares a state variable. The setter triggers a re-render. For expensive initial values, pass a function: useState(() => computeExpensiveValue()) — the function runs only on the first render. The setter accepts a direct value or an updater function: setValue(prev => prev + 1). Use the updater form when the new state depends on the previous state to avoid stale closure bugs.

useEffect

useEffect(setup, dependencies?) runs side effects after the component renders. The setup function connects to external systems (APIs, subscriptions, DOM manipulation). The optional dependency array controls when the effect re-runs:

• No array: runs after every render
• Empty array []: runs once after mount
• With dependencies [a, b]: runs when a or b change

Return a cleanup function to disconnect: useEffect(() => { const sub = subscribe(); return () => sub.unsubscribe(); }, []). Cleanup runs before the effect re-runs and when the component unmounts.

Common patterns: fetching data on mount, subscribing to events, setting up timers, updating document title.

useRef

const ref = useRef(initialValue) creates a mutable container with a .current property that persists across renders without triggering re-renders when changed. Two primary uses:

1. DOM access: pass ref to a JSX element's ref attribute to get the DOM node. ref.current is the actual DOM element after render.
2. Instance variables: store values that need to persist across renders but shouldn't trigger re-renders (timer IDs, previous values, flags).

Key difference from state: updating ref.current does not cause a re-render. Don't read or write refs during rendering — only in event handlers and effects.

useMemo and useCallback

useMemo(() => expensiveComputation(a, b), [a, b]) caches a computed value, recomputing only when dependencies change. useCallback(fn, [deps]) caches a function reference — equivalent to useMemo(() => fn, [deps]). Use these for optimization when passing values/callbacks to memoized child components (React.memo), not as a default for every value.

Custom Hooks

Custom hooks extract reusable stateful logic into functions prefixed with use. They can call any other hooks and return any values.

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  return [value, setValue];
}

Common patterns: useFetch (data fetching), useDebounce (debounced values), useMediaQuery (responsive breakpoints), useLocalStorage (persistent state), useOnClickOutside (click-away detection).

Key Interview Distinction

Hooks must be called in the same order every render (no conditional calls). useState manages state, useEffect handles side effects with cleanup, useRef provides mutable containers without re-renders. Custom hooks are the modern replacement for HOCs and render props for logic reuse. useMemo/useCallback are performance optimizations, not defaults.