What is useSyncExternalStore in React: Explanation and Example

useSyncExternalStore is a React hook that lets components subscribe to external data sources in a way that keeps the UI in sync and avoids tearing. It ensures React reads the latest state from the external store during rendering, making updates smooth and consistent.

How It Works

useSyncExternalStore works like a bridge between React components and external data sources, such as global state stores or browser APIs. Imagine you have a friend who always tells you the latest news. This hook listens to that friend and updates your component whenever the news changes.

It takes three things: a subscribe function to listen for changes, a getSnapshot function to get the current state, and an optional getServerSnapshot for server rendering. React uses these to keep your UI showing the freshest data without glitches or partial updates.

This hook is designed to avoid "tearing," which is when the UI shows inconsistent or outdated data during updates. It makes sure React reads the external state at the right time, so your app feels smooth and reliable.

Example

This example shows a simple counter store outside React. The component uses useSyncExternalStore to subscribe and display the current count.

javascript

import React, { useSyncExternalStore } from 'react';

// Simple external store
const store = {
  count: 0,
  listeners: new Set(),
  increment() {
    this.count += 1;
    this.listeners.forEach(listener => listener());
  },
  subscribe(listener) {
    this.listeners.add(listener);
    return () => this.listeners.delete(listener);
  },
  getSnapshot() {
    return this.count;
  }
};

function Counter() {
  const count = useSyncExternalStore(
    store.subscribe.bind(store),
    store.getSnapshot.bind(store)
  );

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => store.increment()}>Increment</button>
    </div>
  );
}

export default Counter;

Output

A UI showing "Count: 0" initially, increasing by 1 each time the Increment button is clicked.

When to Use

Use useSyncExternalStore when your React component needs to read and stay updated with data from outside React's state system. This includes global state managers, browser APIs like window.matchMedia, or any event emitter.

It is especially useful when you want React to stay perfectly in sync with external data without glitches or inconsistent UI states. For example, libraries like Redux or Zustand use this hook internally to connect their stores to React.

Also, it supports server-side rendering by allowing you to provide a snapshot for the server, making it great for universal React apps.

Key Points

• Subscribes to external stores safely and efficiently.
• Prevents tearing by syncing state during render.
• Supports server-side rendering with a server snapshot.
• Useful for integrating global state or browser APIs.
• Introduced in React 18 as the recommended way to subscribe to external data.

Key Takeaways

useSyncExternalStore keeps React components in sync with external data sources safely and without UI glitches.

It requires a subscribe function and a snapshot getter to track and read the latest state.

Ideal for global state libraries and browser APIs that update outside React.

Supports server-side rendering by allowing a server snapshot.

Introduced in React 18 as the modern way to connect external stores to React.