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