State synchronization patterns in NextJS - Performance & Optimization

Performance: State synchronization patterns

MEDIUM IMPACT

This affects how fast the UI updates and how smoothly user interactions feel by managing state changes efficiently.

Keeping UI state in sync across multiple components

NextJS

import { signal } from '@preact/signals';

const countSignal = signal(0);

function ComponentA() {
  return <button onClick={() => countSignal.value++}>Increment</button>;
}

function ComponentB() {
  return <div>Count: {countSignal.value}</div>;
}

Using a shared reactive signal synchronizes state and triggers only necessary updates.

📈 Performance GainSingle re-render for all dependent components, reducing CPU work and improving responsiveness.

Keeping UI state in sync across multiple components

NextJS

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

function ComponentB() {
  const [count, setCount] = useState(0);
  return <div>Count: {count}</div>;
}

Each component has its own state, causing them to be out of sync and triggering separate re-renders.

📉 Performance CostTriggers multiple re-renders and wastes CPU updating unrelated components.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Separate local states in multiple components	Multiple independent updates	Multiple reflows per update	High paint cost due to repeated layout	[X] Bad
Shared reactive state (signals or context)	Single update propagates to dependents	Single reflow per update	Lower paint cost with batched updates	[OK] Good

Rendering Pipeline

State synchronization affects how changes propagate through the rendering pipeline, triggering style recalculations, layouts, and paints only when necessary.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckExcessive JavaScript execution and layout recalculations caused by unsynchronized or redundant state updates.

Core Web Vital Affected

INP

This affects how fast the UI updates and how smoothly user interactions feel by managing state changes efficiently.

Optimization Tips

1Use shared reactive state to synchronize updates across components.

2Avoid duplicating state in multiple places to reduce re-renders and layout thrashing.

3Initialize client state with server data to speed up hydration and reduce redundant fetches.

Performance Quiz - 3 Questions

What is a main performance benefit of using shared reactive state in Next.js components?

A It reduces unnecessary re-renders by synchronizing updates.

B It increases bundle size significantly.

C It delays the initial page load.

D It disables client-side interactivity.

DevTools: Performance

How to check: Record a session while interacting with the UI, then inspect the flame chart for excessive scripting and layout events.

What to look for: Look for repeated layout and paint events triggered by state updates; fewer and shorter events indicate better synchronization.