React render performance — unnecessary re-renders

React app feels sluggish. Components re-render too often, causing dropped frames, slow interactions, and high CPU usage. React DevTools Profiler shows excessive renders.

(1) First: profile with React DevTools Profiler — don't optimize blindly. (2) Memoize expensive components: React.memo() for pure functional components. (3) Stabilize references: useMemo for computed values, useCallback for functions passed as props. (4) Move state down — lift it only as high as necessary. (5) Split contexts: separate frequently-changing data from rarely-changing data. (6) Use children pattern: pass children instead of rendering them inside the parent that re-renders. (7) Avoid inline objects/arrays as props: style objects created inline create new references each render. (8) For lists: virtualize with react-window or tanstack-virtual.

React re-renders a component whenever its parent re-renders, its state changes, or its context value changes. Each re-render runs the function body and diffs the virtual DOM.