Performance slowdown: expensive renders due to inline callbacks or rerender cascades

My React app uses callbacks defined inline inside components. With many items or deep trees, the app slows dramatically, especially after several renders. For example, repeated rendering of a complex DisplayedGame component eventually hangs Chrome.

Inline functions and JSX structures are re-created on every render, breaking memoization and triggering unnecessary child updates. Over time, this can drastically slow rendering, especially in large or nested components. Fix ✅: • Move helper functions (e.g. renderDetailCells) and components (e.g. DetailCell) outside parent component so they're stable across renders. • Use useCallback or React.memo to memoize props or callbacks and prevent needless rerenders.