224 cards
React Hooks come with two hard rules that govern where and how they can be called. First, hooks must always be invoked at the top level of a React function — inside a component or another hook — never inside loops, conditions, or try/catch blocks. The reason is that React reconciles hook state by call order: each rende...
useEffect is the standard place to synchronize a component with an external system: subscriptions, timers, DOM mutations, analytics, and network requests. Three dependency-array shapes control its lifecycle. With [], the effect runs once on mount and its cleanup runs on unmount. With [dep], it re-runs whenever the dep...
useRef returns a mutable container whose .current property persists across renders without triggering a re-render when mutated. That makes it the right tool for storing DOM nodes, timer ids, the latest value of some state, instance-like variables on a function component, and WebSocket or observer handles. Because writi...
Three primitives form the foundation of render performance work. useMemo(factory, deps) memoizes the result of factory and recomputes only when a dep changes. useCallback(fn, deps) is shorthand for useMemo(() => fn, deps) — it memoizes the function itself. React.memo(Component) skips a re-render of the wrapped compo...
useReducer is the right primitive when the next state depends on the previous state, when the state shape is complex (nested objects, multiple sub-fields), or when updates are better expressed as named actions than as scattered setters. A reducer centralizes transitions in a pure function — easier to test, easier to ex...
Custom hooks are just functions whose names start with use and that call other hooks. The prefix is not cosmetic — React's linter and DevTools use it to recognize hook calls and surface their state. The real reason to extract a custom hook is reuse: any time two components want the same combination of state, effect, an...
React 18 introduced two primitives for keeping the UI responsive during heavy work. useTransition returns [isPending, startTransition] and lets you mark a state update as low-priority: React will keep the current screen interactive while it processes the transition in the background, perfect for filtering a large list...