React · Hooks (Comprehensive)

useSyncExternalStore Hook

Master useSyncExternalStore to subscribe to external data sources and keep React components in sync with state outside React.

Find videos you like?

Save to resource drawer for future reference!

What is useSyncExternalStore?

Subscribe to external data sources

useSyncExternalStore is a Hook that lets you subscribe to external data sources and keep React components synchronized with state that lives outside React. It's perfect for integrating with state management libraries, browser APIs, and third-party stores.

Basic Syntax

// Basic usage

const state = useSyncExternalStore(subscribe, getSnapshot);

// With server-side rendering support

const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);

subscribe:Function to subscribe to store changes

getSnapshot:Function to get current store value

getServerSnapshot:Optional: Initial value for SSR

External Integration

• Redux, Zustand, MobX stores
• Browser APIs (localStorage, geolocation)
• WebSocket connections
• Third-party state management

Concurrent Safe

• Works with React 18 concurrent features
• Prevents tearing in concurrent rendering
• Automatic subscription management
• Memory leak prevention

Concurrent Rendering Safe!

Unlike manual subscriptions, useSyncExternalStore prevents tearing and ensures consistent state across concurrent renders.

When to Use useSyncExternalStore

Essential use cases for external state

State Management Libraries

Integrate with Redux, Zustand, MobX, or custom state management solutions

Browser APIs

Subscribe to localStorage, geolocation, online status, media queries, and other browser APIs

Real-time Data

Connect to WebSocket, WebRTC, or other real-time data sources

💡 Pro Tip

Use useSyncExternalStore when you need to sync React components with state that changes outside of React's control.

Step-by-Step Guide

Learn useSyncExternalStore progressively

Step 1: Create External Store

First, create an external store with subscription capabilities. The store needs to let components subscribe to changes and get the current value.

//Create a simple counter store

let store = { value: 0 };

let listeners = [];

function subscribe(callback) {}

listeners.push(callback);

return () => {}

listeners = listeners.filter(l => l !== callback);

};

}

Pro Tip

The subscribe function must return an unsubscribe function. React will call it when the component unmounts.

Step 2: Add Get Snapshot Function

Create a function that returns the current snapshot of the store. This function must be pure and return the same value when the store hasn't changed.

//Add getSnapshot function

function getSnapshot() {}

return store.value;

}

// Add update function

function updateStore(newValue) {}

store = { value: newValue };

listeners.forEach(callback => callback());

}

Pure Function!

getSnapshot must be pure - same input always returns same output. No side effects allowed!

Step 3: Use in React Component

Now use useSyncExternalStore in your React component to subscribe to the external store and keep it synchronized.

//Use the hook in component

import { useSyncExternalStore } from 'react';

function Counter() {}

const count = useSyncExternalStore(

subscribe,

getSnapshot

);

return (

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

);

}

Auto Cleanup!

React automatically calls the unsubscribe function when the component unmounts. No manual cleanup needed!

Step 4: Add Server-Side Support

For server-side rendering, add a third parameter to provide the initial snapshot value. This prevents hydration mismatches.

//Add server-side support

function getServerSnapshot() {}

return 0; // Initial value

}

function Counter() {}

const count = useSyncExternalStore(

subscribe,

getSnapshot,

getServerSnapshot

);

}

SSR Safe!

getServerSnapshot ensures the same value is rendered on server and client, preventing hydration errors.

Step 5: Best Practices

Follow these guidelines to use useSyncExternalStore effectively and avoid common pitfalls.

//DO: Return stable references

function getSnapshot() {}

return store.value; // Same reference if unchanged

}

//DON'T: Create new objects

function getSnapshot() {}

return { ...store }; // Always new object!

}

//DO: Handle cleanup properly

function subscribe(callback) {}

listeners.push(callback);

return () => listeners.filter(l => l !== callback);

}

Golden Rule

getSnapshot must return the same reference when the data hasn't changed to avoid unnecessary re-renders.

Example: Browser Store Integration

Building a sandbox-safe theme switcher with external store

Theme Switcher with useSyncExternalStore

Sandbox-safe theme switcher with system preference sync

Frontend

// External store for theme management (sandbox-safe version)
const themeStore = {
  theme: 'light',
  listeners: [],
  
  subscribe(callback) {
    this.listeners.push(callback);
    
    // Listen for system theme changes
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    if (mediaQuery.addEventListener) {
      mediaQuery.addEventListener('change', this.handleSystemThemeChange);
    } else {
      mediaQuery.addListener(this.handleSystemThemeChange);
    }
    
    return () => {
      this.listeners = this.listeners.filter(l => l !== callback);
      if (mediaQuery.removeEventListener) {
        mediaQuery.removeEventListener('change', this.handleSystemThemeChange);
      } else {
        mediaQuery.removeListener(this.handleSystemThemeChange);
      }
    };
  },
  
  getSnapshot() {
    return this.theme;
  },
  
  getServerSnapshot() {
    return 'light'; // Default for SSR
  },
  
  setTheme(newTheme) {
    this.theme = newTheme;
    
    // Note: In sandboxed environments, we can't use localStorage
    // Theme will only persist for the current session
    console.log('Theme set to:', newTheme);
    
    this.listeners.forEach(callback => callback());
  },
  
  handleSystemThemeChange: () => {
    // For demo purposes, we'll just update based on system preference
    // In a real app with localStorage, you'd check saved preference first
    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    if (themeStore.theme === 'system') {
      themeStore.theme = systemTheme;
      themeStore.listeners.forEach(callback => callback());
    }
  },
  
  initialize() {
    // Initialize with system preference (no localStorage access)
    this.theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }
};

// Initialize store
themeStore.initialize();

// Custom hook for theme
function useTheme() {
  const theme = React.useSyncExternalStore(
    themeStore.subscribe.bind(themeStore),
    themeStore.getSnapshot.bind(themeStore),
    themeStore.getServerSnapshot.bind(themeStore)
  );
  
  return {
    theme,
    setTheme: themeStore.setTheme.bind(themeStore),
    isDark: theme === 'dark',
    isLight: theme === 'light'
  };
}

// Theme toggle component
function ThemeToggle() {
  const { theme, setTheme, isDark } = useTheme();
  
  return (
    <div className="theme-switcher">
      <div className="current-theme">
        <h2>🎨 Current Theme: {theme}</h2>
        <p className="theme-description">
          {isDark ? '🌙 Dark mode is active' : '☀️ Light mode is active'}
        </p>
      </div>
      
      <div className="theme-options">
        <button 
          className={`theme-btn ${theme === 'light' ? 'active' : ''}`}
          onClick={() => setTheme('light')}
        >
          ☀️ Light
        </button>
        <button 
          className={`theme-btn ${theme === 'dark' ? 'active' : ''}`}
          onClick={() => setTheme('dark')}
        >
          🌙 Dark
        </button>
        <button 
          className={`theme-btn ${theme === 'system' ? 'active' : ''}`}
          onClick={() => setTheme('system')}
        >
          💻 System
        </button>
      </div>
      
      <div className="demo-content">
        <h3>Preview Content</h3>
        <p>This content adapts to your theme selection.</p>
        <div className="demo-box">
          <span className="demo-text">Theme-aware box</span>
        </div>
      </div>
      
      <div className="sync-info">
        <h3>🔄 Sync Information</h3>
        <ul>
          <li>✅ Session-based theme storage</li>
          <li>✅ Follows system preference</li>
          <li>⚠️ No localStorage (sandboxed environment)</li>
          <li>✅ Real-time updates</li>
          <li>✅ Sandbox-safe implementation</li>
        </ul>
      </div>
    </div>
  );
}

// Apply theme to app container (playground-safe)
function ThemeProvider({ children }) {
  const { theme } = useTheme();
  
  React.useEffect(() => {
    // Try to apply to document if available, otherwise apply to container
    try {
      if (document && document.documentElement) {
        document.documentElement.setAttribute('data-theme', theme);
        document.documentElement.className = theme;
      }
    } catch (error) {
      // Fallback: apply theme to the app container
      const appElement = document.querySelector('.app') || document.querySelector('#root');
      if (appElement) {
        appElement.setAttribute('data-theme', theme);
        appElement.className = theme;
      }
    }
  }, [theme]);
  
  return <div className={`app ${theme}`} data-theme={theme}>{children}</div>;
}

function App() {
  return (
    <ThemeProvider>
      <div className="container">
        <h1>🎨 Theme Switcher Demo</h1>
        <p>Experience seamless theme synchronization with useSyncExternalStore</p>
        <ThemeToggle />
      </div>
    </ThemeProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Live Preview

Loading preview...

Key Concepts

Understanding useSyncExternalStore fundamentals

Subscription Pattern

Subscribe to external changes and automatically update React components when data changes.

SSR Compatibility

Server-side rendering support with getServerSnapshot prevents hydration mismatches.

Concurrent Safe

Prevents tearing and ensures consistent state across React's concurrent rendering features.

Best Practices

Do's and Don'ts for useSyncExternalStore

✅ Do This

Return stable references from getSnapshot
Provide getServerSnapshot for SSR
Clean up subscriptions properly
Use for external state only

❌ Avoid This

Don't create new objects in getSnapshot
Don't use for React state
Don't forget cleanup functions
Don't mutate store directly

External State Only!

useSyncExternalStore is specifically for external state. For React component state, use useState or useReducer instead.

Previous Topic

useId Hook

Generate unique IDs, server-side rendering compatibility, and accessibility patterns.

Next Topic

What is Context?

Understand when and why to use Context API, prop drilling problems, and context use cases.

Ask a Question

Have a question about useSyncExternalStore? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Hooks (Comprehensive)

useSyncExternalStore Hook

Master useSyncExternalStore to subscribe to external data sources and keep React components in sync with state outside React.

Find videos you like?

Save to resource drawer for future reference!

What is useSyncExternalStore?

Subscribe to external data sources

Basic Syntax

// Basic usage

const state = useSyncExternalStore(subscribe, getSnapshot);

// With server-side rendering support

const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);

subscribe:Function to subscribe to store changes

getSnapshot:Function to get current store value

getServerSnapshot:Optional: Initial value for SSR

External Integration

• Redux, Zustand, MobX stores
• Browser APIs (localStorage, geolocation)
• WebSocket connections
• Third-party state management

Concurrent Safe

• Works with React 18 concurrent features
• Prevents tearing in concurrent rendering
• Automatic subscription management
• Memory leak prevention

Concurrent Rendering Safe!

Unlike manual subscriptions, useSyncExternalStore prevents tearing and ensures consistent state across concurrent renders.

When to Use useSyncExternalStore

Essential use cases for external state

State Management Libraries

Integrate with Redux, Zustand, MobX, or custom state management solutions

Browser APIs

Subscribe to localStorage, geolocation, online status, media queries, and other browser APIs

Real-time Data

Connect to WebSocket, WebRTC, or other real-time data sources

💡 Pro Tip

Use useSyncExternalStore when you need to sync React components with state that changes outside of React's control.

Step-by-Step Guide

Learn useSyncExternalStore progressively

Step 1: Create External Store

First, create an external store with subscription capabilities. The store needs to let components subscribe to changes and get the current value.

//Create a simple counter store

let store = { value: 0 };

let listeners = [];

function subscribe(callback) {}

listeners.push(callback);

return () => {}

listeners = listeners.filter(l => l !== callback);

};

}

Pro Tip

The subscribe function must return an unsubscribe function. React will call it when the component unmounts.

Step 2: Add Get Snapshot Function

Create a function that returns the current snapshot of the store. This function must be pure and return the same value when the store hasn't changed.

//Add getSnapshot function

function getSnapshot() {}

return store.value;

}

// Add update function

function updateStore(newValue) {}

store = { value: newValue };

listeners.forEach(callback => callback());

}

Pure Function!

getSnapshot must be pure - same input always returns same output. No side effects allowed!

Step 3: Use in React Component

Now use useSyncExternalStore in your React component to subscribe to the external store and keep it synchronized.

//Use the hook in component

import { useSyncExternalStore } from 'react';

function Counter() {}

const count = useSyncExternalStore(

subscribe,

getSnapshot

);

return (

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

);

}

Auto Cleanup!

React automatically calls the unsubscribe function when the component unmounts. No manual cleanup needed!

Step 4: Add Server-Side Support

For server-side rendering, add a third parameter to provide the initial snapshot value. This prevents hydration mismatches.

//Add server-side support

function getServerSnapshot() {}

return 0; // Initial value

}

function Counter() {}

const count = useSyncExternalStore(

subscribe,

getSnapshot,

getServerSnapshot

);

}

SSR Safe!

getServerSnapshot ensures the same value is rendered on server and client, preventing hydration errors.

Step 5: Best Practices

Follow these guidelines to use useSyncExternalStore effectively and avoid common pitfalls.

//DO: Return stable references

function getSnapshot() {}

return store.value; // Same reference if unchanged

}

//DON'T: Create new objects

function getSnapshot() {}

return { ...store }; // Always new object!

}

//DO: Handle cleanup properly

function subscribe(callback) {}

listeners.push(callback);

return () => listeners.filter(l => l !== callback);

}

Golden Rule

getSnapshot must return the same reference when the data hasn't changed to avoid unnecessary re-renders.

Example: Browser Store Integration

Building a sandbox-safe theme switcher with external store

Theme Switcher with useSyncExternalStore

Sandbox-safe theme switcher with system preference sync

Frontend

// External store for theme management (sandbox-safe version)
const themeStore = {
  theme: 'light',
  listeners: [],
  
  subscribe(callback) {
    this.listeners.push(callback);
    
    // Listen for system theme changes
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    if (mediaQuery.addEventListener) {
      mediaQuery.addEventListener('change', this.handleSystemThemeChange);
    } else {
      mediaQuery.addListener(this.handleSystemThemeChange);
    }
    
    return () => {
      this.listeners = this.listeners.filter(l => l !== callback);
      if (mediaQuery.removeEventListener) {
        mediaQuery.removeEventListener('change', this.handleSystemThemeChange);
      } else {
        mediaQuery.removeListener(this.handleSystemThemeChange);
      }
    };
  },
  
  getSnapshot() {
    return this.theme;
  },
  
  getServerSnapshot() {
    return 'light'; // Default for SSR
  },
  
  setTheme(newTheme) {
    this.theme = newTheme;
    
    // Note: In sandboxed environments, we can't use localStorage
    // Theme will only persist for the current session
    console.log('Theme set to:', newTheme);
    
    this.listeners.forEach(callback => callback());
  },
  
  handleSystemThemeChange: () => {
    // For demo purposes, we'll just update based on system preference
    // In a real app with localStorage, you'd check saved preference first
    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    if (themeStore.theme === 'system') {
      themeStore.theme = systemTheme;
      themeStore.listeners.forEach(callback => callback());
    }
  },
  
  initialize() {
    // Initialize with system preference (no localStorage access)
    this.theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }
};

// Initialize store
themeStore.initialize();

// Custom hook for theme
function useTheme() {
  const theme = React.useSyncExternalStore(
    themeStore.subscribe.bind(themeStore),
    themeStore.getSnapshot.bind(themeStore),
    themeStore.getServerSnapshot.bind(themeStore)
  );
  
  return {
    theme,
    setTheme: themeStore.setTheme.bind(themeStore),
    isDark: theme === 'dark',
    isLight: theme === 'light'
  };
}

// Theme toggle component
function ThemeToggle() {
  const { theme, setTheme, isDark } = useTheme();
  
  return (
    <div className="theme-switcher">
      <div className="current-theme">
        <h2>🎨 Current Theme: {theme}</h2>
        <p className="theme-description">
          {isDark ? '🌙 Dark mode is active' : '☀️ Light mode is active'}
        </p>
      </div>
      
      <div className="theme-options">
        <button 
          className={`theme-btn ${theme === 'light' ? 'active' : ''}`}
          onClick={() => setTheme('light')}
        >
          ☀️ Light
        </button>
        <button 
          className={`theme-btn ${theme === 'dark' ? 'active' : ''}`}
          onClick={() => setTheme('dark')}
        >
          🌙 Dark
        </button>
        <button 
          className={`theme-btn ${theme === 'system' ? 'active' : ''}`}
          onClick={() => setTheme('system')}
        >
          💻 System
        </button>
      </div>
      
      <div className="demo-content">
        <h3>Preview Content</h3>
        <p>This content adapts to your theme selection.</p>
        <div className="demo-box">
          <span className="demo-text">Theme-aware box</span>
        </div>
      </div>
      
      <div className="sync-info">
        <h3>🔄 Sync Information</h3>
        <ul>
          <li>✅ Session-based theme storage</li>
          <li>✅ Follows system preference</li>
          <li>⚠️ No localStorage (sandboxed environment)</li>
          <li>✅ Real-time updates</li>
          <li>✅ Sandbox-safe implementation</li>
        </ul>
      </div>
    </div>
  );
}

// Apply theme to app container (playground-safe)
function ThemeProvider({ children }) {
  const { theme } = useTheme();
  
  React.useEffect(() => {
    // Try to apply to document if available, otherwise apply to container
    try {
      if (document && document.documentElement) {
        document.documentElement.setAttribute('data-theme', theme);
        document.documentElement.className = theme;
      }
    } catch (error) {
      // Fallback: apply theme to the app container
      const appElement = document.querySelector('.app') || document.querySelector('#root');
      if (appElement) {
        appElement.setAttribute('data-theme', theme);
        appElement.className = theme;
      }
    }
  }, [theme]);
  
  return <div className={`app ${theme}`} data-theme={theme}>{children}</div>;
}

function App() {
  return (
    <ThemeProvider>
      <div className="container">
        <h1>🎨 Theme Switcher Demo</h1>
        <p>Experience seamless theme synchronization with useSyncExternalStore</p>
        <ThemeToggle />
      </div>
    </ThemeProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Live Preview

Loading preview...

Key Concepts

Understanding useSyncExternalStore fundamentals

Subscription Pattern

Subscribe to external changes and automatically update React components when data changes.

SSR Compatibility

Server-side rendering support with getServerSnapshot prevents hydration mismatches.

Concurrent Safe

Prevents tearing and ensures consistent state across React's concurrent rendering features.

Best Practices

Do's and Don'ts for useSyncExternalStore

✅ Do This

Return stable references from getSnapshot
Provide getServerSnapshot for SSR
Clean up subscriptions properly
Use for external state only

❌ Avoid This

Don't create new objects in getSnapshot
Don't use for React state
Don't forget cleanup functions
Don't mutate store directly

External State Only!

useSyncExternalStore is specifically for external state. For React component state, use useState or useReducer instead.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

useId Hook

What is Context?

Building Your Learning Module...

useSyncExternalStore Hook

Basic Syntax

External Integration

Concurrent Safe

Concurrent Rendering Safe!

State Management Libraries

Browser APIs

Real-time Data

💡 Pro Tip

Step 1: Create External Store

Step 2: Add Get Snapshot Function

Step 3: Use in React Component

Step 4: Add Server-Side Support

Step 5: Best Practices

Theme Switcher with useSyncExternalStore

Subscription Pattern

SSR Compatibility

Concurrent Safe

✅ Do This

❌ Avoid This

External State Only!

useId Hook

What is Context?

useSyncExternalStore Hook

Basic Syntax

External Integration

Concurrent Safe

Concurrent Rendering Safe!

State Management Libraries

Browser APIs

Real-time Data

💡 Pro Tip

Step 1: Create External Store

Step 2: Add Get Snapshot Function

Step 3: Use in React Component

Step 4: Add Server-Side Support

Step 5: Best Practices

Theme Switcher with useSyncExternalStore

Subscription Pattern

SSR Compatibility

Concurrent Safe

✅ Do This

❌ Avoid This

External State Only!