useSyncExternalStore is a React Hook that enables components to safely subscribe and read data from external stores (browser APIs, global variables, external state libraries) in a way that is consistent with React's concurrent rendering features, preventing UI tearing.
useSyncExternalStore is a specialized React Hook introduced in React 18 [citation:2]. Its primary purpose is to solve the problem of "UI tearing," which can occur when components read from an external data source during concurrent rendering. If an external store changes while React is in the middle of rendering a component tree, different components might read different versions of the data, leading to an inconsistent UI [citation:2]. This hook provides a safe, synchronous way to subscribe to an external store and ensures that all components in a single render pass see the same consistent snapshot of the data [citation:2][citation:8].
subscribe: A function that receives a callback from React. It is responsible for setting up listeners on the external store. Whenever the store's data changes, this function must call the provided callback to notify React. It must return an unsubscribe function for cleanup [citation:2][citation:10].
getSnapshot: A synchronous, pure function that returns the current snapshot of the data from the external store. React calls this function to get the value for rendering. For performance, it should be fast and return the same value by reference if the underlying data hasn't changed [citation:2].
getServerSnapshot (optional): A function required for Server-Side Rendering (SSR). It returns the initial snapshot of the data as it should be rendered on the server. If omitted in an SSR context, React will attempt to render the component on the client only, which can lead to hydration mismatches [citation:2].
This hook is essential when you need to integrate React with any state that lives outside of its control [citation:8]. Common use cases include: subscribing to browser APIs (like navigator.onLine, window.matchMedia, or geolocation), integrating with legacy or third-party state management libraries (like older versions of Redux or MobX), or reading from global variables and custom event systems [citation:2][citation:8][citation:10]. By using this hook, you can ensure your components stay consistent with the external source, even when React is performing high-priority concurrent updates.
A practical example of useSyncExternalStore can be found in the codebase of TipTap, a rich-text editor framework. It uses the hook to synchronize the editor's internal state (an external store) with the React components that render the editor UI, ensuring that the UI always reflects the most current state of the editor instance and preventing rendering inconsistencies [citation:4].
0-2 years experience
2-5 years experience
5-8 years experience
8+ years experience
