Cheat sheet
React
Hooks rules, rendering, and the performance questions interviewers love.
Rules of hooks
Top level only
No hooks in loops, conditions, or nested functions.
Components / hooks only
Call from React functions, not plain JS.
Dependency arrays
List every reactive value used inside; lint with exhaustive-deps.
Core hooks
useState
const [n, setN] = useState(0)setN(prev => prev+1) for updates based on prior state.
useEffect
Runs after paint; return a cleanup fn; [] = mount only.
useMemo / useCallback
Memoise expensive values / stable fn identities — don't over-use.
useRef
Mutable box that survives renders without causing one.
Rendering
Keys
Stable, unique keys in lists — index keys break on reorder.
Re-render triggers
State/props change, parent re-render, context value change.
Batching
React 18 batches state updates, incl. in async handlers.
Performance
React.memo
Skips re-render when props are shallow-equal.
Lift state down
Keep state as local as possible to limit re-render scope.
Lazy load
const X = lazy(() => import('./X'))
Aevrofy · aevrofy.com — free interview prep