React: How to optimize a React application?

React application optimization is finding and fixing "lags": unnecessary re-renders, large bundles, slow loads.

Simple analogy: Imagine your car (application) is barely moving. Optimization is:

1. Remove extra cargo (Code Splitting).
2. Lubricate the wheels (memoization).
3. Install a more powerful engine (list virtualization).

Optimization steps (in order):

1. Profiling — find what is lagging:

• React DevTools Profiler — record and view which components are re-rendering.
• "Highlight updates" — highlight updates.
• Chrome DevTools Performance — overall performance.

2. Reduce the number of re-renders:

• React.memo — for components that often re-render with the same props.
• useMemo — for heavy calculations (sorting, filtering).
• useCallback — for stable functions passed to child components.
• Proper keys — do not use index for dynamic lists.
• Lift state up — store state closer to where it is used.

3. Code Splitting (reduce bundle):

• React.lazy + Suspense — load pages on demand.
• Dynamic import() — for heavy libraries (moment, pdf).
• Next.js does this automatically.

4. List optimization:

• Virtualization (react-window, react-virtuoso) — render ONLY visible elements. If you have a list of 10000 rows, you don't need to create 10000 DOM nodes.

5. Debounce and Throttle:

• On text input (search) — debounce (wait until user stops typing).
• On scroll — throttle (execute no more than once per 100ms).

6. Image optimization:

• Use modern formats (WebP, AVIF).
• lazy loading for images (loading="lazy").
• next/image (Next.js) — automatic optimization.

Reality (React 19): React Compiler solves 80% of re-render problems automatically.