React Performance Hacks: Make Your Front-End Fly

I. ⚙️ Build & Bundle-Level Optimizations

• Tree Shaking: Ensure ES module exports (export const) and mark side-effectful files in package.json with "sideEffects": false to help bundlers remove dead code.
• Code Splitting: Split code not just by routes but also by UI states like modals, tabs, and widgets.
• Use libraries like @loadable/component to handle SSR gracefully.
• Import only what you need — when you need it.
• Dynamic Imports: Use dynamic imports for features behind flags, or when implementing micro-frontends. Helps in loading code only when needed.

const Main = React.lazy(() => import('./User'));

• Build Tooling: Opt for modern tools like Vite and esbuild for faster rebuilds, especially beneficial for large codebases. Consider Turbopack for monorepos.
• Bundle Analysis: Regularly analyze your production bundle using tools like webpack-bundle-analyzer or source-map-explorer to identify unnecessary bloat.

npx source-map-explorer build/static/js/*.js

II. 🕸️ Network & Data Fetching Optimization

• Parallel Data Fetching: Avoid waterfalls by colocating multiple useQuery() calls or using Promise.all. It reduces cumulative data loading time.
• Stale-While-Revalidate (SWR): Serve cached content immediately and revalidate in the background for a fast and responsive UX. Helps reduce Time To Interactive (TTI). Show cached data instantly, fetch fresh data in the background. Keeps UX snappy.
• Prefetching: Preload data on hover or when links come into the viewport using tools like TanStack Query’s prefetchQuery.
• API Caching: Use client-side tools like SWR or React Query along with CDN cache headers to minimize re-fetching.
• Defer Non-Critical Data: Use useDeferredValue and separate Suspense boundaries to avoid blocking the main render path.

III.🚀 Rendering Optimization (React Core + Patterns)

• Concurrent Rendering: React 18 enables concurrent rendering using createRoot(). Make sure to avoid synchronous/blocking logic inside the render tree.
• Suspense Boundaries: Create modular suspense boundaries at layout, section, and component levels instead of wrapping the whole app.
• Lazy Loading with Suspense: Use React.lazy combined with <Suspense> to progressively hydrate and render components.
• Avoid Inline Functions in JSX: Define functions outside the render method or use useCallback.
• Proper Key Usage in Lists: Provide stable and unique key props when rendering lists to help React efficiently update the DOM.
• Immutable Data Structures: Use libraries that enforce immutability, as changing object references can trigger re-renders.
• Debouncing and Throttling: Limit the frequency of expensive operations triggered by user events like typing or scrolling.
• useTransition: Use this hook to mark updates as non-urgent, ideal for large UI computations like filtering big datasets.

const [isPending, startTransition] = useTransition();
startTransition(() => setFilteredData(compute(data)));

⚠️ Tip: Avoid fetching data directly in useEffect, those block renderings. Instead, use it useQuery() to handle async logic efficiently.

IV. 📦 State Management & Re-render Avoidance

• Zustand: Great for local and UI-persistent state like filters and toggles. Very minimal and performant.
• Jotai: Provides fine-grained state with reactivity and is compatible with React’s concurrency model.
• Redux Toolkit: Still a good fit for complex workflows, undo/redo, and large-scale enterprise logic.
• React Context: Best reserved for global constants that rarely change, such as themes or authentication tokens.
• Lift State Up Minimally: Only lift state to the lowest common ancestor where it’s needed to prevent unnecessary re-renders in unrelated components. Use useState and useEffect wisely.
• React state should be treated as immutable. We should never mutate this.state directly, as calling setState() afterwards may replace the mutation you made.

❌ Anti-pattern: Passing frequently changing values through Context leads to re-renders across the app. Avoid it.