React useSyncExternalStore: Освоение интеграции с внешним состоянием

Хук React useSyncExternalStore, представленный в React 18, предоставляет мощный и эффективный способ интеграции внешних источников данных и библиотек управления состоянием в ваши React-компоненты. Этот хук позволяет компонентам подписываться на изменения во внешних хранилищах, гарантируя, что пользовательский интерфейс всегда отражает последние данные, и при этом оптимизирует производительность. В этом руководстве представлен исчерпывающий обзор useSyncExternalStore, охватывающий его основные концепции, шаблоны использования и лучшие практики.

Понимание необходимости useSyncExternalStore

Во многих React-приложениях вы столкнетесь со сценариями, когда состоянием необходимо управлять вне дерева компонентов. Это часто происходит при работе с:

• Сторонние библиотеки: Интеграция с библиотеками, которые управляют собственным состоянием (например, подключение к базе данных, API браузера или физический движок).
• Общее состояние для нескольких компонентов: Управление состоянием, которое должно быть доступно компонентам, не связанным напрямую (например, статус аутентификации пользователя, настройки приложения или глобальная шина событий).
• Внешние источники данных: Получение и отображение данных из внешних API или баз данных.

Традиционные решения для управления состоянием, такие как useState и useReducer, хорошо подходят для управления локальным состоянием компонента. Однако они не предназначены для эффективной работы с внешним состоянием. Их прямое использование с внешними источниками данных может привести к проблемам с производительностью, несогласованным обновлениям и усложнению кода.

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

Основные концепции useSyncExternalStore

useSyncExternalStore принимает три аргумента:

1. subscribe: Функция, которая принимает обратный вызов (callback) в качестве аргумента и подписывается на внешнее хранилище. Этот обратный вызов будет вызываться всякий раз, когда данные в хранилище изменяются.
2. getSnapshot: Функция, которая возвращает снимок (snapshot) данных из внешнего хранилища. Эта функция должна возвращать стабильное значение, которое React может использовать для определения, изменились ли данные. Она должна быть чистой и быстрой.
3. getServerSnapshot (необязательный): Функция, которая возвращает начальное значение хранилища во время серверного рендеринга. Это крайне важно для обеспечения соответствия исходного HTML-кода рендерингу на стороне клиента. It is used ONLY in server-side rendering environments. If omitted in a client side environment, it uses getSnapshot instead. It is important that this value never changes after it is initially rendered on the server side.

Вот более подробный разбор каждого аргумента:

1. subscribe

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

Пример:

            const subscribe = (callback) => {
  store.addListener(callback);
  return () => {
    store.removeListener(callback);
  };
};
            

              
                Copy
              
            
          

В этом примере store.addListener добавляет обратный вызов в список слушателей хранилища. Функция возвращает функцию очистки, которая удаляет слушателя при размонтировании компонента, предотвращая утечки памяти.

2. getSnapshot

Функция getSnapshot отвечает за получение снимка данных из внешнего хранилища. Этот снимок должен быть стабильным значением, которое React может использовать для определения, изменились ли данные. React использует Object.is для сравнения текущего снимка с предыдущим. Поэтому она должна быть быстрой, и настоятельно рекомендуется, чтобы она возвращала примитивное значение (строку, число, булево значение, null или undefined).

Пример:

            const getSnapshot = () => {
  return store.getData();
};
            

              
                Copy
              
            
          

В этом примере store.getData возвращает текущие данные из хранилища. React будет сравнивать это значение с предыдущим, чтобы определить, нужно ли перерисовывать компонент.

3. getServerSnapshot (необязательный)

Функция getServerSnapshot актуальна только при использовании серверного рендеринга (SSR). Эта функция вызывается во время начального рендеринга на сервере, и ее результат используется в качестве начального значения хранилища до того, как на клиенте произойдет гидратация. Возвращение согласованных значений критически важно для успешного SSR.

Пример:

            const getServerSnapshot = () => {
  return store.getInitialDataForServer();
};
            

              
                Copy
              
            
          

В этом примере `store.getInitialDataForServer` возвращает начальные данные, подходящие для серверного рендеринга.

Базовый пример использования

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

            // External store
const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React component
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

В этом примере createStore создает простое внешнее хранилище, которое управляет значением счетчика. Компонент Counter использует useSyncExternalStore для подписки на изменения в хранилище и отображения текущего значения счетчика. При нажатии на кнопку инкремента функция setState обновляет значение в хранилище, что вызывает перерисовку компонента.

Интеграция с библиотеками управления состоянием

useSyncExternalStore особенно полезен для интеграции с библиотеками управления состоянием, такими как Zustand, Jotai и Recoil. Эти библиотеки предоставляют свои собственные механизмы для управления состоянием, и useSyncExternalStore позволяет бесшовно интегрировать их в ваши React-компоненты.

Вот пример интеграции с Zustand:

            import { useStore } from 'zustand';
import { create } from 'zustand';

// Zustand store
const useBoundStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// React component
function Counter() {
  const count = useStore(useBoundStore, (state) => state.count);
  const increment = useStore(useBoundStore, (state) => state.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Zustand упрощает создание хранилища. Его внутренние реализации subscribe и getSnapshot неявно используются, когда вы подписываетесь на определенную часть состояния.

Вот пример интеграции с Jotai:

            import { atom, useAtom } from 'jotai'

// Jotai atom
const countAtom = atom(0)

// React component
function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

export default Counter;

            

              
                Copy
              
            
          

Jotai использует атомы для управления состоянием. useAtom внутренне обрабатывает подписку и создание снимков.

Оптимизация производительности

useSyncExternalStore предоставляет несколько механизмов для оптимизации производительности:

• Выборочные обновления: React перерисовывает компонент только тогда, когда изменяется значение, возвращаемое getSnapshot. Это гарантирует предотвращение ненужных перерисовок.
• Пакетная обработка обновлений (батчинг): React объединяет обновления из нескольких внешних хранилищ в одну перерисовку. Это уменьшает количество перерисовок и улучшает общую производительность.
• Избежание устаревших замыканий: useSyncExternalStore гарантирует, что компонент всегда имеет доступ к последним данным из внешнего хранилища, даже при работе с асинхронными обновлениями.

Для дальнейшей оптимизации производительности рассмотрите следующие лучшие практики:

• Минимизируйте объем данных, возвращаемых getSnapshot: Возвращайте только те данные, которые действительно необходимы компоненту. Это уменьшает объем данных для сравнения и повышает эффективность процесса обновления.
• Используйте техники мемоизации: Мемоизируйте результаты дорогостоящих вычислений или преобразований данных. Это может предотвратить ненужные повторные вычисления и повысить производительность.
• Избегайте ненужных подписок: Подписывайтесь на внешнее хранилище только тогда, когда компонент действительно виден. Это может сократить количество активных подписок и улучшить общую производительность.
• Убедитесь, что getSnapshot возвращает новый *стабильный* объект только в случае изменения данных: Избегайте создания новых объектов/массивов/функций, если базовые данные на самом деле не изменились. По возможности возвращайте тот же объект по ссылке.

Серверный рендеринг (SSR) с useSyncExternalStore

При использовании useSyncExternalStore с серверным рендерингом (SSR) крайне важно предоставить функцию getServerSnapshot. Эта функция гарантирует, что исходный HTML, отрендеренный на сервере, будет соответствовать рендерингу на стороне клиента, предотвращая ошибки гидратации и улучшая пользовательский опыт.

Вот пример использования getServerSnapshot:

            const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const getServerSnapshot = () => initialValue; // Important for SSR

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    getServerSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React component
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

В этом примере getServerSnapshot возвращает начальное значение счетчика. Это гарантирует, что исходный HTML, отрендеренный на сервере, будет соответствовать рендерингу на стороне клиента. getServerSnapshot должен возвращать стабильное и предсказуемое значение. Он также должен выполнять ту же логику, что и функция getSnapshot на сервере. Избегайте доступа к специфичным для браузера API или глобальным переменным в getServerSnapshot.

Продвинутые шаблоны использования

useSyncExternalStore можно использовать в различных продвинутых сценариях, включая:

• Интеграция с API браузера: Подписка на изменения в API браузера, таких как localStorage или navigator.onLine.
• Создание кастомных хуков: Инкапсуляция логики подписки на внешнее хранилище в кастомный хук.
• Использование с Context API: Комбинирование useSyncExternalStore с React Context API для предоставления общего состояния дереву компонентов.

Рассмотрим пример создания кастомного хука для подписки на localStorage:

            import { useSyncExternalStore } from 'react';

function useLocalStorage(key, initialValue) {
  const getSnapshot = () => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Error getting value from localStorage:", error);
      return initialValue;
    }
  };

  const subscribe = (callback) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const setItem = (value) => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
      window.dispatchEvent(new Event('storage')); // Manually trigger storage event for same-page updates
    } catch (error) {
      console.error("Error setting value in localStorage:", error);
    }
  };

  const serverSnapshot = () => initialValue;

  const storedValue = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return [storedValue, setItem];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

В этом примере useLocalStorage — это кастомный хук, который подписывается на изменения в localStorage. Он использует useSyncExternalStore для управления подпиской и получения текущего значения из localStorage. Он также корректно отправляет событие storage, чтобы обеспечить отражение обновлений на той же странице (поскольку события storage срабатывают только в других вкладках). serverSnapshot гарантирует, что начальные значения будут правильно предоставлены в серверных средах.

Лучшие практики и распространенные ошибки

Вот некоторые лучшие практики и распространенные ошибки, которых следует избегать при использовании useSyncExternalStore:

• Избегайте прямого изменения внешнего хранилища: Всегда используйте API хранилища для обновления данных. Прямое изменение хранилища может привести к несогласованным обновлениям и неожиданному поведению.
• Убедитесь, что getSnapshot — чистая и быстрая функция: getSnapshot не должна иметь побочных эффектов и должна быстро возвращать стабильное значение. Дорогостоящие вычисления или преобразования данных следует мемоизировать.
• Предоставляйте функцию getServerSnapshot при использовании SSR: Это крайне важно для обеспечения соответствия исходного HTML, отрендеренного на сервере, рендерингу на стороне клиента.
• Корректно обрабатывайте ошибки: Используйте блоки try-catch для обработки потенциальных ошибок при доступе к внешнему хранилищу.
• Очищайте подписки: Всегда отписывайтесь от внешнего хранилища при размонтировании компонента, чтобы предотвратить утечки памяти. Функция subscribe должна возвращать функцию очистки, которая удаляет слушателя.
• Понимайте последствия для производительности: Хотя useSyncExternalStore оптимизирован для производительности, важно понимать потенциальное влияние подписки на внешние хранилища. Минимизируйте объем данных, возвращаемых getSnapshot, и избегайте ненужных подписок.
• Тщательно тестируйте: Убедитесь, что интеграция с хранилищем работает корректно в различных сценариях, особенно при серверном рендеринге и в конкурентном режиме.

Заключение

useSyncExternalStore — это мощный и эффективный хук для интеграции внешних источников данных и библиотек управления состоянием в ваши React-компоненты. Понимая его основные концепции, шаблоны использования и лучшие практики, вы сможете эффективно управлять общим состоянием в своих React-приложениях и оптимизировать их производительность. Независимо от того, интегрируетесь ли вы со сторонними библиотеками, управляете общим состоянием между компонентами или получаете данные из внешних API, useSyncExternalStore предоставляет стандартизированное и надежное решение. Используйте его для создания более надежных, поддерживаемых и производительных React-приложений для глобальной аудитории.

Дополнительные ресурсы

• Документация React по useSyncExternalStore
• Pull Request в React 18, представляющий useSyncExternalStore
• Библиотека управления состоянием Zustand
• Библиотека управления состоянием Jotai