React Context без лишних ререндеров: подписка на отдельные поля
Знакомая ситуация: в контексте лежат два поля, скажем, name и age. Меняется age, и ререндерится компонент, который читает только name. У useContext нет селектора, как у useSelector в Redux: React сравнивает value провайдера целиком, а при каждом изменении это новый объект. Ни useMemo, ни React.memo тут не спасают.В статье — небольшой контекст, где компонент ререндерится, только когда меняется его собственное поле. И разбор, почему он устроен именно так:Почему через контекст стоит передавать не сами данные, а стабильный объект доступа к ним?Почему обычные приёмы — useMemo на value и раздельные контексты — до этого не дотягивают?Зачем для подписки нужен useSyncExternalStore и что такое tearing?На каких деталях легко ошибиться и когда такой контекст вообще нужен? Читать далее