Neste artigo, veremos como Zustand usa useSyncExternalStoreExports em seu [código-fonte.]

useSyncExternalStoreExports é importado de use-sync-external-store/shim/with-selector. use-sync-external-store é um shim compatível com versões anteriores para React.useSyncExternalStore Funciona com qualquer React que suporte Hooks.

Lendo a frase acima, você deve estar se perguntando o que é useSyncExternalStore.

useSyncExternalStore

useSyncExternalStore é um React Hook que permite assinar uma loja externa.

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

Use useSyncExternalStore para ler um valor do armazenamento externo que pode ser:

1. Bibliotecas de gerenciamento de estado de terceiros que mantêm estado fora do React.

2. APIs de navegador que expõem um valor mutável e eventos para assinar suas alterações.

Exemplo de uso:

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

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

O exemplo acima foi retirado da documentação do React.

Uso de useSyncExternalStore no Zustand:

Zustand usa useSyncExternalStore em 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 é desestruturado de useSyncExternalStoreExports e é usado em 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 tem api.subscribe, api.getState, api.getInitialState, selector e equalityFn.

Sobre nós:

No Think Throo, temos a missão de ensinar as melhores práticas inspiradas em projetos de código aberto.

10x suas habilidades de codificação praticando conceitos de arquitetura avançados em Next.js/React, aprenda as melhores práticas e crie projetos de nível de produção.

Somos código aberto - https://github.com/thinkthroo/thinkthroo (Dê-nos uma estrela!)

Aprimore sua equipe com nossos cursos avançados baseados na arquitetura de base de código. Entre em contato conosco pelo e-mail [email protected] para saber mais!

Referências:

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