DEV Community

Cover image for useSyncExternalStoreExports in Zustand source code explained.
Ramu Narasinga
Ramu Narasinga

Posted on Edited on Originally published at thinkthroo.com

useSyncExternalStoreExports in Zustand source code explained.

#javascript #opensource #zustand #react

In this article, we will look at how Zustand uses useSyncExternalStoreExports in its [source code.]

Image description

useSyncExternalStoreExports is imported from use-sync-external-store/shim/with-selector. use-sync-external-store is a backwards-compatible shim for React.useSyncExternalStore Works with any React that supports Hooks.

Reading the above sentence, you might be wondering what a useSyncExternalStore.

useSyncExternalStore

useSyncExternalStore is a React Hook that lets you subscribe to an external store.

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)
Enter fullscreen mode Exit fullscreen mode

Use the useSyncExternalStore to read a value from external store that can be:

  1. Third-party state management libraries that hold state outside of React.

  2. Browser APIs that expose a mutable value and events to subscribe to its changes.

Example usage: 

import { useSyncExternalStore } from 'react';
import { todosStore } from './todoStore.js';

function TodosApp() {
  const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot);
  // ...
}
Enter fullscreen mode Exit fullscreen mode

The above example is picked from React docs.

useSyncExternalStore Usage In Zustand:

Zustand uses useSyncExternalStore in src/traditional.ts.

import ReactExports from 'react'
// eslint-disable-next-line import/extensions
import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
import { createStore } from './vanilla.ts'
import type {
  Mutate,
  StateCreator,
  StoreApi,
  StoreMutatorIdentifier,
} from './vanilla.ts'

const { useDebugValue } = ReactExports
const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports
Enter fullscreen mode Exit fullscreen mode

useSyncExternalStoreWithSelector is de-structured from useSyncExternalStoreExports and this is used in useStoreWithEqualityFn.

export function useStoreWithEqualityFn<TState, StateSlice>(
  api: ReadonlyStoreApi<TState>,
  selector: (state: TState) => StateSlice = identity as any,
  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {
  const slice = useSyncExternalStoreWithSelector(
    api.subscribe,
    api.getState,
    api.getInitialState,
    selector,
    equalityFn,
  )
  useDebugValue(slice)
  return slice
}
Enter fullscreen mode Exit fullscreen mode

useSyncExternalStoreWithSelector has api.subscribe, api.getState, api.getInitialState, selector and equalityFn.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@ramu-narasinga

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects

References:

  1. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L44

  2. https://www.npmjs.com/package/use-sync-external-store

  3. https://legacy.reactjs.org/docs/hooks-reference.html#usesyncexternalstore

  4. https://react.dev/reference/react/useSyncExternalStore

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



Top comments (0)