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.

Practice

1. What is the main purpose of state synchronization in Next.js applications?

easy

A. To keep data consistent between server and client components

B. To improve CSS styling performance

C. To handle routing between pages

D. To optimize image loading speed

Solution

1. Step 1: Understand state synchronization concept

   State synchronization means keeping data the same across different parts of an app, especially between server and client.

2. Step 2: Identify Next.js usage

   Next.js apps often fetch data on the server and need to keep that data consistent on the client side.

3. Final Answer:

   To keep data consistent between server and client components -> Option A

4. Quick Check:

   State sync = consistent data [OK]

Hint: Think about data staying the same everywhere [OK]

Common Mistakes:

• Confusing state sync with styling or routing
• Thinking it only applies to client-side
• Assuming it improves image loading

2. Which of the following is the correct way to update a React state variable count using the useState hook in Next.js?

easy

A. updateCount(count + 1);

B. count = count + 1;

C. useState(count + 1);

D. setCount(count + 1);

Solution

1. Step 1: Recall useState update syntax

   React's useState returns a setter function to update state, e.g., setCount(newValue).

2. Step 2: Identify correct usage

   Direct assignment like count = count + 1 is invalid; useState(count + 1) is a hook call, not update; updateCount is undefined.

3. Final Answer:

   setCount(count + 1); -> Option D

4. Quick Check:

   useState setter = setCount() [OK]

Hint: Use the setter function from useState to update state [OK]

Common Mistakes:

• Trying to assign state variable directly
• Calling useState inside event handlers
• Using undefined update functions

3. Consider this Next.js component snippet:

import { useState, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return <div>Count: {count}</div>;
}

What will the component display after 3 seconds?

medium

A. Count: 0

B. Count: 3

C. Count: 1

D. Count: NaN

Solution

1. Step 1: Understand useEffect with empty dependency

   The effect runs once on mount, setting an interval that increments count every 1000ms.

2. Step 2: Calculate count after 3 seconds

   After 3 intervals (3 seconds), count increments from 0 to 3.

3. Final Answer:

   Count: 3 -> Option B

4. Quick Check:

   Increment every second = 3 after 3s [OK]

Hint: Count increments once per second, so 3 seconds = 3 [OK]

Common Mistakes:

• Thinking useEffect runs multiple times
• Ignoring the cleanup function
• Assuming count resets

4. You have this Next.js component code that fetches data and sets state:

import { useState, useEffect } from 'react';

export default function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(json => setData(json));
  }, []);

  return <div>{data.title}</div>;
}

What error might occur when this component first renders?

medium

A. Infinite loop in useEffect

B. SyntaxError in fetch call

C. Cannot read property 'title' of null

D. setData is not a function

Solution

1. Step 1: Analyze initial state and render

   Initial state data is null, so on first render data.title tries to access property of null.

2. Step 2: Identify runtime error

   Accessing property on null causes a runtime error: "Cannot read property 'title' of null".

3. Final Answer:

   Cannot read property 'title' of null -> Option C

4. Quick Check:

   Access null.title = error [OK]

Hint: Check if state is null before accessing properties [OK]

Common Mistakes:

• Assuming fetch syntax error
• Expecting infinite loop without dependencies
• Confusing setData function availability

5. In Next.js, you want to synchronize server-fetched data with client state and update it on user interaction. Which pattern best achieves this?

hard

A. Fetch data in getServerSideProps, pass as props, then use useState on client to manage updates

B. Fetch data only on client with useEffect and ignore server data

C. Use getStaticProps and never update client state

D. Store data in a global variable outside React components

Solution

1. Step 1: Understand server and client data flow

   getServerSideProps fetches fresh data on each request, passing it as props to the component.

2. Step 2: Use client state for updates

   Using useState with initial props allows client-side updates while keeping initial server data.

3. Final Answer:

   Fetch data in getServerSideProps, pass as props, then use useState on client to manage updates -> Option A

4. Quick Check:

   Server props + client state = sync and update [OK]

Hint: Combine server props with client useState for sync and updates [OK]

Common Mistakes:

• Ignoring server data and fetching only on client
• Using static props without updates
• Using global variables outside React state