Пост useContextSelector – быстрый доступ к большому контексту

useContextSelector – быстрый доступ к большому контексту Если в вашем приложении используется большой контекст, то он может негативно влиять на производительность приложения. Каждое изменение контекста вызывает ре-рендер всех компонентов, которые зависят от контекста. Чтобы уменьшить лишние ре-рендеры, можно мемоизировать компоненты: import { memo } from 'react'; const Welcome = () => { const { color } = useContext(ThemeContext); return <WelcomeBody color={color} /> } const WelcomeBody = memo(({ color }) => { return <div style={{ color }}>Hello!</div>; }) Еще один вариант оптимизации - разделить один большой контекст на несколько. У такого подхода есть минус: когда используется слишком много контекстов, с этим сложно работать. Если вы не хотите использовать стейт-менеджеры, то при работе с контекстом можете использовать библиотеку use-context-selector. С ее помощью можно читать только часть объекта контекста и ре-рендерить, когда эта часть изменится. import { createContext, useContextSelector } from 'use-context-selector'; const MyContext = createContext(null); const Counter1 = () => { const value = useContextSelector(MyContext, value => value.myValue); … } https://marmelab.com/blog/2024/10/16/usecontextselector-a-faster-usecontext-for-react.html