Zustand for client state in NextJS - Performance & Optimization

Performance: Zustand for client state

MEDIUM IMPACT

This affects how fast the page responds to user actions and how efficiently the UI updates without unnecessary delays.

Managing client state efficiently in a Next.js app

NextJS

import { create } from 'zustand';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
}));

function Counter() {
  const count = useStore(state => state.count);
  const increment = useStore(state => state.increment);
  return (
    <div>
      <button onClick={increment}>Increment</button>
      <p>{count}</p>
    </div>
  );
}

export default Counter;

Zustand updates only components that use the changed state slice, reducing re-renders and improving responsiveness.

📈 Performance GainSingle re-render per state change, improving INP and reducing CPU usage.

Managing client state efficiently in a Next.js app

NextJS

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>{count}</p>
    </div>
  );
}

export default Counter;

Using local useState in many components causes repeated state duplication and unnecessary re-renders across unrelated parts.

📉 Performance CostTriggers multiple re-renders and can cause slower interaction responsiveness as app scales.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Local useState in many components	Multiple updates across components	Multiple reflows per update	Higher paint cost due to many re-renders	[X] Bad
Zustand with selective subscriptions	Minimal updates only where needed	Single reflow per update	Lower paint cost with fewer re-renders	[OK] Good

Rendering Pipeline

Zustand updates state outside React's local state, then triggers selective React component re-renders only where state is used.

→JavaScript Execution

→React Reconciliation

→Paint

→Composite

⚠️ BottleneckReact Reconciliation when many components re-render unnecessarily

Core Web Vital Affected

INP

This affects how fast the page responds to user actions and how efficiently the UI updates without unnecessary delays.

Optimization Tips

1Use Zustand selectors to subscribe only to needed state slices.

2Avoid updating global state unnecessarily to reduce re-renders.

3Profile React components to ensure minimal re-render on state changes.

Performance Quiz - 3 Questions

How does Zustand improve interaction responsiveness compared to local useState?

A By batching all state updates into one global update

B By updating only components subscribed to changed state slices

C By forcing full page reload on state change

D By storing state on the server instead of client

DevTools: React DevTools Profiler

How to check: Record interactions and observe component re-render counts and durations when state changes.

What to look for: Look for fewer component re-renders and shorter render times indicating efficient state updates.