Подписка на внешний стор с выборкой

Хук useSyncExternalStoreWithSelector() используется для подписки на внешний стор с избирательным обновлением компонента. Он расширяет useSyncExternalStore() за счёт функции выбора и сравнения: обновление вызывается только при изменении выбранного значения. Это снижает количество перерендеров при работе с глобальным состоянием.

import { useSyncExternalStoreWithSelector } from 'react';

function useCustomStore(selector, isEqual) {
  return useSyncExternalStoreWithSelector(
    subscribe, // подписка на стор
    getSnapshot, // получение полного состояния
    getSnapshot, // серверный snapshot
    selector, // выбор нужного значения
    isEqual // функция сравнения
  );
}

Frontender Libs - обзор библиотек JS / CSS

Подписка на внешний стор с выборкой

Хук useSyncExternalStoreWithSelector() используется для подписки на внешний стор с избирательным обновлением компонента. Он расширяет useSyncExternalStore() за счёт функции выбора и сравнения: обновление вызывается только при изменении выбранного значения. Это снижает количество перерендеров при работе с глобальным состоянием.

import { useSyncExternalStoreWithSelector } from 'react';

function useCustomStore(selector, isEqual) {
  return useSyncExternalStoreWithSelector(
    subscribe, // подписка на стор
    getSnapshot, // получение полного состояния
    getSnapshot, // серверный snapshot
    selector, // выбор нужного значения
    isEqual // функция сравнения
  );
}

При вызове хука можно передать selector, чтобы отслеживать только часть состояния, и isEqual, чтобы предотвратить обновление при эквивалентных значениях. Может пригодиться при подписке на сложные сторы, например, Redux без лишних обёрток.

👉 @sWebDev

hottg.com/sWebDev/3803

675 viewsJun 23 at 07:43