Optimizing React Re-renders

Problem How would you optimize a piece of React code — for example a component re-rendering too often, or a slow list?

Be ready to discuss

• Measure first: use the React DevTools Profiler to find which components re-render and why (the "why did this render" trace) rather than memoizing blindly and adding overhead everywhere.
• Memoization: useMemo for expensive computations, useCallback to stabilize callback identity, and React.memo on pure children — plus the point that each has a cost and is pointless if the child was cheap anyway.
• Referential identity: inline object/array/function literals in JSX props create a new reference every render and silently defeat React.memo; same trap with a context value built inline in the provider.
• List rendering: virtualize long lists (react-window / react-virtualized) instead of mounting thousands of DOM nodes, and use stable keys rather than array indices so reconciliation does not remount rows.
• State placement: colocate state as low in the tree as possible and split unrelated state so one shared object does not re-render the whole subtree; lift context out or split contexts by update frequency.
• Other levers: code splitting with lazy/Suspense, debouncing high-frequency inputs, moving derived values out of state, and useTransition to keep urgent updates responsive.
• Be ready to walk through a concrete before/after diff of a component you have actually profiled.