ПостРеактивность – это легко

Реактивность – это легко Стандартный useContext заставляет обновляться все компоненты-потребители, даже если им не нужна изменившаяся часть состояния. Это приводит к лишним ре-рендерам, особенно в больших компонентах вроде таблиц или списков. Автор статьи столкнулся с этим в MUI X Data Grid: клик по одной ячейке вызывал ре-рендер всех остальных. Решение — точечная подписка через селекторы Вместо того, чтобы хранить состояние в useState и передавать его через Context, можно использовать внешний Store и специальный хук useSelector. Идея проста: 🔴 Store — это обычный класс, который хранит состояние, умеет подписывать на обновления (subscribe) и уведомлять подписчиков, когда данные изменились (update). Он живёт вне рендера React. 🔴 useSelector(store, selectorFn) — кастомный хук, который принимает store и функцию-селектор. Селектор — это функция, которая из всего объекта состояния достает только нужный компонентa фрагмент данных (например, `state => state.focus === index`). Хук подписывается на store и вызывает локальный ре-рендер только тогда, когда возвращаемое селектором значение изменилось. Пример кода: const Context = createContext(); export function Grid() { const [store] = useState(() => new Store({ focus: 0 })); return ( <Context.Provider value={store}> {Array.from({ length: 50 }).map((_, i) => ( <Cell index={i} /> ))} </Context.Provider> ); } const selectors = { isFocus: (state, index) => state.focus === index, }; function Cell({ index }) { const store = useContext(Context); const focus = useSelector(store, selectors.isFocus, index); return ( <button ref={ref} onClick={() => store.update({ ...store.state, focus: index })} className={clsx({ focus })} > {index} </button> ); }; Такой подход позволяет обновлять только те компоненты, чьи данные действительно изменились, и часто избавляет от необходимости оборачивать всё в React.memo. https://romgrk.com/posts/reactivity-is-easy/