Создание пользовательского хранилища с useSyncExternalStore

Пользовательскому хранилищу нужны три вещи: некоторое состояние, метод подписки для регистрации слушателей и метод getSnapshot для чтения текущего состояния. Это весь контракт, которого ожидает useSyncExternalStore.

Благодаря такой компактности хранилище не зависит от фреймворка, поэтому его можно использовать как внутри React, так и за его пределами.

Фабрика createStore принимает начальное значение и возвращает объект с getSnapshot, методом подписки и методом обновления. Внутри она хранит текущее состояние и набор функций обратного вызова слушателей.

Этот фабричный подход позволяет создавать несколько независимых хранилищ с помощью одной переиспользуемой функции.

Когда функция обновления изменяет состояние, она устанавливает новое значение, а затем вызывает каждого зарегистрированного слушателя. Это функции обратного вызова, которые React передал через подписку.

Их вызов сообщает React, что хранилище изменилось, побуждая его повторно прочитать getSnapshot и выполнить повторный рендеринг всех компонентов, читающих данные из хранилища.

Компонент считывает данные из хранилища, вызывая useSyncExternalStore с методами подписки хранилища и getSnapshot. Хук возвращает текущее значение и выполняет повторный рендеринг при его изменении.

Вы можете обернуть это в пользовательский хук, например useStore, чтобы компоненты вызывали одну функцию, а не подключали аргументы хука каждый раз самостоятельно.

Поскольку хранилище является объектом уровня модуля, любой импортирующий его компонент использует то же состояние; поставщик контекста не требуется. Не нужно оборачивать дерево компонентов или передавать свойства через все его уровни.

В этом заключается одно из главных преимуществ внешних хранилищ: общее глобальное состояние с простой моделью импорта и использования вместо иерархии провайдеров.

Вы можете создать несколько небольших хранилищ, каждое из которых отвечает за свой фрагмент состояния, вместо одного монолитного хранилища. Компоненты подписываются только на нужные им фрагменты.

Так области ответственности разделяются, а количество повторных рендерингов ограничивается: изменение одного фрагмента никогда не затрагивает компоненты, читающие другой.

Zustand, популярная минималистичная библиотека управления состоянием, построена именно на этом подходе и с четвертой версии внутренне использует useSyncExternalStore. Ее небольшой API по сути представляет собой доработанную фабрику createStore со слоем селекторов.

Эта связь помогает понять, как устроены такие библиотеки: это тонкие удобные оболочки над тем же примитивом, который Вы можете создать самостоятельно.

Передав селектор в getSnapshot, который возвращает только ту часть состояния, которую использует компонент, Вы гарантируете, что компонент будет повторно отрисовываться только при изменении этой части.

Для этого результат селектора должен быть стабильным, поэтому мемоизируйте производные значения, чтобы избежать бесконечного цикла из-за новых ссылок и при этом ограничить обновления нужным фрагментом.

Для отладки можно добавить к хранилищу метку и записывать обновления в журнал либо интегрировать его с браузерными DevTools, чтобы отслеживать, какое хранилище изменилось и когда.

Даже простая запись в консоль внутри обновления, защищённая флагом разработки, помогает понять поток изменения состояния во время создания хранилища.

Поскольку хранилище написано на обычном JavaScript, Вы можете напрямую проверять его логику: вызвать обновление и убедиться, что getSnapshot возвращает новое значение, не выполняя никакой отрисовки.

Можно также проверить его внутри React, отрисовав компонент, который читает данные из хранилища, и убедившись, что после обновления происходит повторная отрисовка. Так Вы проверите и хранилище, и его интеграцию.

Вспомните контракт метода подписки пользовательского хранилища.

Пользовательскому хранилищу нужны состояние, подписка и getSnapshot. Фабрика createStore и обновление, уведомляющее слушателей, обеспечивают общее глобальное состояние без поставщика, поскольку импорты модуля используют один экземпляр.

Используйте несколько хранилищ фрагментов и селекторы, чтобы ограничить повторные отрисовки, не забывая о стабильных ссылках. Zustand v4+ построен именно на этом шаблоне, а хранилище на обычном JavaScript легко проверять как внутри React, так и вне его.