React Performance Optimization: Beyond useMemo and useCallback

React Performance Optimization: Beyond useMemo and useCallback

Introduction

React is fast by default, but as apps grow, performance bottlenecks creep in. While useMemo and useCallback are common fixes, they’re not always the best solution. In this guide, we’ll explore lesser-known optimization techniques to make your React apps lightning-fast.

Common React Performance Issues

  1. Unnecessary Re-renders – Child components update even when props don’t change.

  2. Large Bundle Sizes – Slow initial load due to excessive JavaScript.

  3. Inefficient Context Usage – Consumers re-render even when unrelated data changes.

Advanced Optimization Techniques

1. Smart Memoization with React.memo and Custom Comparators

React.memo prevents re-renders if props are shallowly equal. But sometimes, you need deep comparison:

const UserProfile = React.memo(({ user }) => (
  <div>{user.name}</div>
), (prevProps, nextProps) => prevProps.user.id === nextProps.user.id);

Use case: Avoid re-renders when only non-critical props (e.g., lastActive) change.

2. Code Splitting with React.lazy and Dynamic Imports

Reduce initial load time by splitting components:

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

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <HeavyComponent />
    </Suspense>
  );
}

Bonus: Use Next.js dynamic imports for even better SSR support.

3. Optimizing Context API

Avoid unnecessary re-renders by splitting contexts:

// Bad: Single context with frequent updates
const AppContext = createContext();

// Good: Split into separate contexts
const UserContext = createContext();
const SettingsContext = createContext();

Real-World Example: Optimizing a Dashboard

A client’s admin dashboard had 2-second re-renders. By:

  • Memoizing expensive table calculations.

  • Code-splitting charts and maps.

  • Using separate contexts for user and UI state.
    Result: 40% faster interactions and smoother UX.

Tools to Measure Performance

  • React DevTools (Highlight updates)

  • Lighthouse (Audit bundle size)

  • Chrome Profiler (Find slow renders)

Conclusion

Beyond useMemo and useCallback, React offers powerful optimization tools. Key takeaways:
✅ Use React.memo with custom comparators.
✅ Split code dynamically.
✅ Optimize context usage.

Back to Blogs
React Performance Optimization: Beyond useMemo and useCallback