Home  >  Article  >  Web Front-end  >  useSyncExternalStoreExports in state source code explained.

useSyncExternalStoreExports in state source code explained.

WBOY
WBOYOriginal
2024-09-10 11:06:34802browse

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

useSyncExternalStoreExports in Zustand source code explained.

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?)

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);
  // ...
}

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

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
}

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

About us:

At Think Throo, we are on a mission to teach the best practices inspired by open-source projects.

10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.

We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)

Up skill your team with our advanced courses based on codebase architecture. Reach out to us at hello@thinkthroo.com to learn more!

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



The above is the detailed content of useSyncExternalStoreExports in state source code explained.. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn