React Performance

Priority: P0 (CRITICAL)

Strategies to minimize waterfalls, bundle size, and render cost.

Elimination of Waterfalls (P0)

• Parallel Data: Use Promise.all([getUser(), getProducts(), ...]) for independent fetches. Avoid sequential awaits (Request Waterfalls).
• Preload: Start fetches before render (in event handlers or route loaders).
• Suspense: Use Suspense boundaries to stream partial content and show partial content early.

Bundle Optimization (P0)

• No Barrel Files: Avoid barrel files (importing from index.ts); import directly from component files to improve tree-shaking.
• Lazy Load: Use React.lazy or next/dynamic for heavy components like Charts, Modals, or large libraries.
• Dependency Reduction: Replace moment with dayjs or lodash with native/radash to drop bytes. Use source-map-explorer or bundle-visualizer to find bloat.

Rendering & Re-renders (P1)