React Context без лишних ререндеров: подписка на отдельные поля

Вот важная новость с фронта ИИ: kirilenko 10 минут назад Краткое содержание статьи React Context без лишних ререндеров: подписка на отдельные поля Средний 12 мин 133 ReactJS * JavaScript * Программирование * Туториал Знакомая ситуация: в контексте лежат два поля, скажем, name и age. Меняется age, и ререндерится компонент, который читает только name. У useContext нет селектора, как у useSelector в Redux: React сравнивает value провайдера целиком, а при каждом изменении это новый объект.

Ни useMemo, ни React. В статье — небольшой контекст, где компонент ререндерится, только когда меняется его собственное поле. И разбор, почему он устроен именно так:Почему через контекст стоит передавать не сами данные, а стабильный объект доступа к ним?

Технические детали

Почему обычные приёмы — useMemo на value и раздельные контексты — до этого не дотягивают? Зачем для подписки нужен useSyncExternalStore и что такое tearing? На каких деталях легко ошибиться и когда такой контекст вообще нужен?

ПроблемаВот как это выглядит в коде: провайдер с двумя полями и два потребителя, каждый читает своё. function FormProvider({ children }: { children: React. ReactNode }) { const = useState('Ann const = useState(30); ; } function NameLabel() { = useContext(FormContext); ; } function AgeInput() { = useContext(FormContext); return ( setAge(+e.

value)} /> ); } Каждый ввод в AgeInput ререндерит NameLabel, хотя name не менялся. Дело в том, что у useContext нет селектора, как у useSelector в Redux: React сравнивает value целиком через Object. is, а при смене age объект честно новый.

Отраслевые последствия

Поэтому useMemo на value не поможет, и React. memo на потребителях тоже: обновление контекста приходит мимо пропсов. Ниже — сразу решение: контекст, в котором NameLabel ререндерится только при смене name.

А потом разберём, почему оно устроено именно так, почему обычные приёмы до него не дотягивают и зачем там useSyncExternalStore. Все примеры — на React 19 ( вместо ), но идеи работают и в 18. Решение: fast-context — внешний стор под видом контекстаИдея в том, чтобы перестать передавать через Context данные.

Через него передаётся стабильный объект доступа к данным — { get, set, subscribe }, — ссылка на который не меняется никогда. Раз value провайдера не меняется, механизм контекста никого не ререндерит. А сами данные живут в useRef, и компонент подписывается ровно на то поле, которое читает.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.