Optimising React performance

Model answer. Measure first. Use the React DevTools Profiler (which components rendered, why, and for how long) and the browser's Performance panel. Turn on "highlight updates" to see unnecessary re-renders.

Likely causes and fixes:

1. State too high up: typing updates state in a parent, so the whole page re-renders on every keystroke. Move the input's state down into the component that needs it.
2. Expensive children re-rendering for no reason: wrap rows in React.memo, and keep props stable with useMemo / useCallback.
3. Heavy filtering on each keystroke: memoise with useMemo, debounce the query, or mark the list update as low priority with useDeferredValue / useTransition, so typing stays responsive.

const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);   // the list can lag a little behind the input
const results = useMemo(() => filterColleges(all, deferredQuery), [all, deferredQuery]);

1. Rendering thousands of DOM nodes: virtualise the list (react-window, TanStack Virtual), so only visible rows exist.
2. Unstable keys (index or random) causing remounts: use real ids.
3. Big bundles: code-split rarely used routes and components with React.lazy.

Also check production builds (development mode is much slower), and avoid creating objects in context values on every render.