React Context без лишних ререндеров: подписка на отдельные поля
A context contains two fields, name and age. When age changes, a component that reads only name still rerenders. Unlike Redux's useSelector, useContext has no selector: React compares the provider's value as a whole, and every change creates a new object. Neither useMemo nor React.memo solves this, and a small context pattern is presented in which a component rerenders only when its own field changes.
Знакомая ситуация: в контексте лежат два поля, скажем, name и age. Меняется age, и ререндерится компонент, который читает только name. У useContext нет селектора, как у useSelector в Redux: React сравнивает value провайдера целиком, а при каждом изменении это новый объект. Ни useMemo, ни React.memo тут не спасают. В статье — небольшой контекст, где компонент ререндерится, только когда меняется его собственное поле. И разбор, почему он устроен именно так: Почему через контекст стоит передавать не сами данные, а стабильный объект доступа к ним? Почему обычные приёмы — useMemo на value и раздельные контексты — до этого не дотягивают? Зачем для подписки нужен useSyncExternalStore и что такое tearing? На каких деталях легко ошибиться и когда такой контекст вообще нужен? Читать далее