Оптимизация React Context: как снизить избыточные ререндеры без лишних сложностей

// Пример проблемного контекста:
const GlobalStateContext = createContext();

const GlobalProvider = ({ children }) => {
  const [user, setUser] = useState({ name: '', permissions: [] });
  const [notifications, setNotifications] = useState([]);
  const [uiTheme, setUiTheme] = useState('light');

  return (
    <GlobalStateContext.Provider value={{ 
      user, setUser, 
      notifications, setNotifications, 
      uiTheme, setUiTheme 
    }}>
      {children}
    </GlobalStateContext.Provider>
  );
};

// Компонент, который ререндерит при любом изменении контекста
const Header = () => {
  const { uiTheme } = useContext(GlobalStateContext);
  console.log('Header rerenders!');
  return <header className={uiTheme}>...</header>;
};

// Типичное решение: декомпозиция
const UserContext = createContext();
const NotificationsContext = createContext();
const ThemeContext = createContext();

const OptimizedProvider = ({ children }) => (
  <UserContext.Provider value={useState({})}>
    <NotificationsContext.Provider value={useState([])}>
      <ThemeContext.Provider value={useState('light')}>
        {children}
      </ThemeContext.Provider>
    </NotificationsContext.Provider>
  </UserContext.Provider>
);

// Использование в компоненте:
const ThemeSwitch = () => {
  const [theme, setTheme] = useContext(ThemeContext);
  // Ререндер только при изменении темы
}

const composeProviders = (...providers) => ({ children }) =>
  providers.reduce(
    (acc, Provider) => <Provider>{acc}</Provider>,
    children
  );

export const AppProviders = composeProviders(
  UserProvider,
  NotificationsProvider,
  ThemeProvider
);

const useSelectorContext = (context, selector) => {
  const state = useContext(context);
  const [selected, setSelected] = useState(selector(state));
  
  useLayoutEffect(() => {
    const newSelected = selector(state);
    if (!Object.is(selected, newSelected)) {
      setSelected(newSelected);
    }
  }, [state]);

  return selected;
};

// В компоненте:
const userName = useSelectorContext(
  UserContext, 
  user => user.name
);

const createSelectorHook = (context) => (selector) => {
  const store = useContext(context);
  const [, forceRender] = useState({});
  
  const selectorRef = useRef(selector);
  const selectedRef = useRef(selector(store));

  useLayoutEffect(() => {
    selectorRef.current = selector;
  });

  useEffect(() => {
    const checkForUpdates = () => {
      const newSelected = selectorRef.current(store);
      if (!Object.is(selectedRef.current, newSelected)) {
        selectedRef.current = newSelected;
        forceRender({});
      }
    };
    store.subscribe(checkForUpdates);
    return () => store.unsubscribe(checkForUpdates);
  }, [store]);

  return selectedRef.current;
};

const SettingsPanel = React.memo(() => {
  const { user } = useContext(UserContext);
  const [theme, setTheme] = useThemeContext();
  
  return useMemo(() => (
    <div>
      <h2>{user.name}'s Settings</h2>
      <ThemeSelector theme={theme} onChange={setTheme} />
    </div>
  ), [user.name, theme, setTheme]);
});

// Деликатная работа с функциями
const CartProvider = ({ children }) => {
  const [cart, setCart] = useState([]);
  
  // Мемоизация функций во избежание лишних ререндеров 
  const addToCart = useCallback((item) => {
    setCart(prev => [...prev, item]);
  }, []);
  
  const contextValue = useMemo(() => ({
    cart,
    addToCart
  }), [cart, addToCart]);

  return (
    <CartContext.Provider value={contextValue}>
      {children}
    </CartContext.Provider>
  );
};

// Профилирование ререндеров в DevTools
<Profile
  id="PerformanceSuspect"
  type="button"
  onClick={handleClick}
>
  Problem?
</Profile>

# Измерение с React Profiler API
npx react-devtools --profile

// Идеальный компромисс для производительности
const user = useUserContext(state => ({
  name: state.name,
  avatar: state.avatar
}));