use-sync-external-store

What is use-sync-external-store?

The use-sync-external-store package provides a hook that allows React components to read from an external, synchronous data source and subscribe to updates from that source. It is designed to be a primitive hook for creating other hooks that need to subscribe to external data sources.

What are use-sync-external-store's main functionalities?

Subscribing to an external store

This feature allows you to create a custom hook that subscribes to an external store. The hook will re-render the component whenever the store updates.

import { useSyncExternalStore } from 'use-sync-external-store';

function useCustomHook(store) {
  const state = useSyncExternalStore(
    store.subscribe,
    store.getSnapshot,
    store.getServerSnapshot
  );
  return state;
}

Other packages similar to use-sync-external-store

react-redux

React Redux provides a 'useSelector' hook that allows you to read data from a Redux store and subscribe to updates. It is similar to use-sync-external-store but is specifically tailored for Redux state management.

mobx-react-lite

MobX React Lite offers 'useObserver' and other hooks to reactively work with MobX stores. It provides a way to connect React components to MobX observables, similar to how use-sync-external-store connects components to external stores.

recoil

Recoil provides a 'useRecoilValue' hook that subscribes to changes in an atom or selector, which is conceptually similar to use-sync-external-store's ability to subscribe to external data sources.

zustand

Zustand is a state management library that offers a hook-based API to subscribe to global state within React components. It is similar to use-sync-external-store in that it allows components to react to external state changes.

README

use-sync-external-store

Backwards-compatible shim for React.useSyncExternalStore. Works with any React that supports Hooks.

See also https://github.com/reactwg/react-18/discussions/86.