En este artículo, veremos cómo Zustand usa useSyncExternalStoreExports en su [código fuente.]

useSyncExternalStoreExports se importa desde use-sync-external-store/shim/with-selector. use-sync-external-store es una corrección compatible con versiones anteriores de React.useSyncExternalStore Funciona con cualquier React que admita Hooks.

Al leer la oración anterior, es posible que te preguntes para qué sirveSyncExternalStore.

usarSyncExternalStore

useSyncExternalStore es un React Hook que te permite suscribirte a una tienda externa.

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

Utilice useSyncExternalStore para leer un valor de una tienda externa que puede ser:

1. Bibliotecas de administración de estado de terceros que mantienen el estado fuera de React.

2. API del navegador que exponen un valor mutable y eventos para suscribirse a sus cambios.

Ejemplo de uso:

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

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

El ejemplo anterior está seleccionado de los documentos de React.

useSyncExternalStore Uso en Zustand:

Zustand usa useSyncExternalStore en 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 está desestructurado de useSyncExternalStoreExports y se usa en useStoreWithEqualityFn.

export function useStoreWithEqualityFn(
  api: ReadonlyStoreApi,
  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 tiene api.subscribe, api.getState, api.getInitialState, selector e igualdadFn.

Sobre nosotros:

En Think Throo, tenemos la misión de enseñar las mejores prácticas inspiradas en proyectos de código abierto.

10 veces tus habilidades de codificación practicando conceptos arquitectónicos avanzados en Next.js/React, aprende las mejores prácticas y crea proyectos de nivel de producción.

Somos de código abierto: https://github.com/thinkthroo/thinkthroo (¡Danos una estrella!)

Mejora las habilidades de tu equipo con nuestros cursos avanzados basados ​​en arquitectura de base de código. ¡Comuníquese con nosotros en [email protected] para obtener más información!

Referencias:

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