Optimize a React App to Reduce Component Re-renders

Requirements: Given a React application, identify and implement optimizations to reduce unnecessary component re-renders. Candidate coded live on codesandbox.io while the interviewer progressively added constraints.

Design/Approach:

• Wrap pure functional components in React.memo so they skip re-rendering when props are shallowly equal.
• Use useMemo/useCallback to keep derived values and callback references stable across renders, avoiding new object/function identities being passed as props each render.
• Split large components into smaller ones so a state change only re-renders the affected subtree, not the whole page.
• Avoid inline object/array/function literals as JSX props (they are new references every render).
• Use the Context API carefully -- any update to a context value re-renders all consumers, so prefer state colocation or splitting context into smaller, more targeted providers.
• Use stable, unique keys in lists to prevent unnecessary remounts.