Shared state across layouts in NextJS - Step-by-Step Execution

Concept Flow - Shared state across layouts

User interacts with page

↓

Layout component reads shared state

↓

Shared state updated via React context or server component

↓

All layouts consuming state re-render

↓

Page content updates reflecting shared state

User actions update shared state stored in a common provider, layouts consume this state and update UI accordingly.

Execution Sample

NextJS

import { createContext, useState, useContext } from 'react';

const SharedStateContext = createContext();

export function SharedStateProvider({ children }) {
  const [count, setCount] = useState(0);
  return <SharedStateContext.Provider value={{ count, setCount }}>{children}</SharedStateContext.Provider>;
}

export function useSharedState() {
  return useContext(SharedStateContext);
}

This code creates a React context to hold shared state and provides hooks to access and update it across layouts.

Execution Table

Step	Action	State Before	State After	Effect on Layouts
1	Initial render	count=0	count=0	Layouts render with count=0
2	User clicks increment button	count=0	count=1	Layouts re-render showing count=1
3	User clicks increment button again	count=1	count=2	Layouts re-render showing count=2
4	User navigates to another page with same layout	count=2	count=2	Layouts show count=2, state preserved
5	User clicks decrement button	count=2	count=1	Layouts re-render showing count=1
6	Exit	count=1	count=1	User leaves, state remains until reset or reload

💡 Execution stops when user leaves or reloads page; shared state persists during session.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	Final
count	0	1	2	1	1

Key Moments - 3 Insights

Why do all layouts update when the shared state changes?

Because the shared state is stored in a React context provider wrapping all layouts, any update triggers re-render in all consuming layouts as shown in steps 2, 3, and 5.

Does the shared state reset when navigating between pages?

No, the shared state persists across page navigation because the provider wraps the entire app layout, as seen in step 4 where count remains 2.

What happens if the provider is not wrapping all layouts?

Layouts outside the provider won't access or update the shared state, so they won't reflect changes, breaking shared state behavior.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'count' after step 3?

A 2

B 1

C 0

D 3

💡 Hint

Check the 'State After' column for step 3 in the execution table.

At which step does the shared state persist across page navigation?

A Step 2

B Step 5

C Step 4

D Step 6

💡 Hint

Look for the step mentioning navigation and state preservation in the execution table.

If the provider was removed, what would happen to the layouts?

A They would still share state normally.

B They would not update on state changes.

C They would crash immediately.

D They would update only on page reload.

💡 Hint

Refer to the key moment about provider wrapping all layouts.

Concept Snapshot

Shared state across layouts in Next.js uses React context or server components.
Wrap your app or layouts with a provider holding state.
Layouts consume this state via hooks to stay in sync.
State persists across page navigation within the provider.
Updates trigger re-render in all layouts consuming the state.

Full Transcript

In Next.js, to share state across different layouts, you create a React context provider that holds the shared state. This provider wraps the entire app or the layouts that need access. When the user interacts and updates the state, all layouts consuming this context re-render to reflect the new state. The shared state persists across page navigation as long as the provider remains mounted. This approach ensures consistent UI updates and state synchronization across layouts.