Shared state across layouts in NextJS - Performance & Optimization

Performance: Shared state across layouts

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by how state is managed and shared between layouts and pages.

Sharing user authentication state across multiple layouts in a Next.js app

NextJS

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

const UserContext = createContext(null);

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetch('/api/auth').then(res => res.json()).then(data => setUser(data.user));
  }, []);
  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
}

// Wrap root layout with <UserProvider> and consume user via useContext in nested layouts

Centralizes user state fetching and sharing via React Context, avoiding repeated fetches and re-renders.

📈 Performance GainSingle data fetch and fewer re-renders improve INP and reduce blocking during interactions.

Sharing user authentication state across multiple layouts in a Next.js app

NextJS

import { useState, useEffect } from 'react';

export default function Layout({ children }) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetch('/api/auth').then(res => res.json()).then(data => setUser(data.user));
  }, []);
  return <>{children}</>;
}

// Each layout fetches user separately causing repeated requests

Each layout fetches and manages user state independently, causing repeated network requests and multiple re-renders.

📉 Performance CostTriggers multiple data fetches and re-renders, increasing INP and blocking interaction responsiveness.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Independent state per layout	Multiple fetches and state updates	Multiple reflows per layout	Higher paint cost due to repeated updates	[X] Bad
Centralized shared state via Context	Single fetch and state update	Single reflow for shared state change	Lower paint cost with fewer updates	[OK] Good

Rendering Pipeline

Shared state flows from the root provider through React context to nested layouts, minimizing repeated data fetching and re-rendering.

→JavaScript Execution

→React Reconciliation

→Paint

→Composite

⚠️ BottleneckReact Reconciliation due to unnecessary re-renders when state is duplicated or fetched multiple times.

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by how state is managed and shared between layouts and pages.

Optimization Tips

1Centralize shared state to avoid repeated data fetching.

2Use React Context or server components to share state efficiently.

3Minimize re-renders by keeping shared state at the highest common ancestor.

Performance Quiz - 3 Questions

What is the main performance problem when each layout fetches shared state independently?

A Multiple network requests and repeated re-renders

B Too many DOM nodes created

C CSS selector complexity increases

D JavaScript bundle size grows significantly

DevTools: Performance

How to check: Record a performance profile while navigating layouts; look for repeated data fetching and multiple React renders.

What to look for: Multiple network requests for the same data and repeated React component renders indicate poor shared state management.