Продвинутые паттерны React Context API для управления состоянием

React Context API предоставляет мощный механизм для обмена состоянием в вашем приложении без необходимости «пробрасывания» пропсов (prop drilling). Хотя базовое использование довольно простое, для раскрытия его полного потенциала необходимо понимать продвинутые паттерны, которые могут справиться со сложными сценариями управления состоянием. В этой статье рассматриваются некоторые из этих паттернов, предлагаются практические примеры и полезные идеи для повышения уровня вашей разработки на React.

Понимание ограничений базового Context API

Прежде чем углубляться в продвинутые паттерны, важно осознать ограничения базового Context API. Хотя он подходит для простого, глобально доступного состояния, он может стать громоздким и неэффективным для сложных приложений с часто меняющимся состоянием. Каждый компонент, использующий контекст, перерисовывается всякий раз, когда значение контекста изменяется, даже если компонент не зависит от конкретной части обновленного состояния. Это может привести к проблемам с производительностью.

Паттерн 1: Составные компоненты с контекстом

Паттерн «Составной компонент» расширяет Context API, создавая набор связанных компонентов, которые неявно разделяют состояние и логику через контекст. Этот паттерн способствует переиспользованию и упрощает API для потребителей. Это позволяет инкапсулировать сложную логику с простой реализацией.

Пример: компонент вкладок (Tab)

Проиллюстрируем это на примере компонента вкладок. Вместо передачи пропсов через несколько уровней компоненты Tab неявно общаются через общий контекст.

// TabContext.js
import React, { createContext, useContext, useState, ReactNode } from 'react';

interface TabContextType {
  activeTab: string;
  setActiveTab: (tab: string) => void;
}

const TabContext = createContext(undefined);

interface TabProviderProps {
  children: ReactNode;
  defaultTab: string;
}

export const TabProvider: React.FC = ({ children, defaultTab }) => {
  const [activeTab, setActiveTab] = useState(defaultTab);

  const value: TabContextType = {
    activeTab,
    setActiveTab,
  };

  return {children};
};

export const useTabContext = () => {
  const context = useContext(TabContext);
  if (!context) {
    throw new Error('useTabContext must be used within a TabProvider');
  }
  return context;
};

// TabList.js
import React, { ReactNode } from 'react';

interface TabListProps {
  children: ReactNode;
}

export const TabList: React.FC = ({ children }) => {
  return 
{children}
;
};

// Tab.js
import React, { ReactNode } from 'react';
import { useTabContext } from './TabContext';

interface TabProps {
  label: string;
  children: ReactNode;
}

export const Tab: React.FC = ({ label, children }) => {
  const { activeTab, setActiveTab } = useTabContext();
  const isActive = activeTab === label;

  const handleClick = () => {
    setActiveTab(label);
  };

  return (
    
      {label}
    
  );
};

// TabPanel.js
import React, { ReactNode } from 'react';
import { useTabContext } from './TabContext';

interface TabPanelProps {
  label: string;
  children: ReactNode;
}

export const TabPanel: React.FC = ({ label, children }) => {
  const { activeTab } = useTabContext();
  const isActive = activeTab === label;

  return (
    
  );
};

// Использование
import { TabProvider, TabList, Tab, TabPanel } from './components/Tabs';

function App() {
  return (
    
      
        Tab 1
        Tab 2
        Tab 3
      
      Content for Tab 1
      Content for Tab 2
      Content for Tab 3
    
  );
}

export default App;

Преимущества:

• Упрощенный API для потребителей: пользователям нужно беспокоиться только о Tab, TabList и TabPanel.
• Неявное разделение состояния: компоненты автоматически получают доступ к общему состоянию и обновляют его.
• Улучшенная переиспользуемость: компонент Tab можно легко использовать в разных контекстах.

Паттерн 2: Динамические контексты

В некоторых сценариях вам могут потребоваться разные значения контекста в зависимости от положения компонента в дереве компонентов или других динамических факторов. Динамические контексты позволяют создавать и предоставлять значения контекста, которые меняются в зависимости от конкретных условий.

Пример: темизация с помощью динамических контекстов

Рассмотрим систему темизации, в которой вы хотите предоставлять разные темы в зависимости от предпочтений пользователя или раздела приложения, в котором он находится. Мы можем сделать упрощенный пример со светлой и темной темой.

// ThemeContext.js
import React, { createContext, useContext, useState, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
}

const defaultTheme: Theme = {
    background: 'white',
    color: 'black'
};

const darkTheme: Theme = {
    background: 'black',
    color: 'white'
};

const ThemeContext = createContext({
    theme: defaultTheme,
    toggleTheme: () => {}
});

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC = ({ children }) => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  const theme = isDarkTheme ? darkTheme : defaultTheme;

  const toggleTheme = () => {
    setIsDarkTheme(!isDarkTheme);
  };

  const value: ThemeContextType = {
    theme,
    toggleTheme,
  };

  return {children};
};

export const useTheme = () => {
  return useContext(ThemeContext);
};

// Использование
import { useTheme, ThemeProvider } from './ThemeContext';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    

      
Это компонент с темой.
      Переключить тему
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

В этом примере ThemeProvider динамически определяет тему на основе состояния isDarkTheme. Компоненты, использующие хук useTheme, будут автоматически перерисовываться при изменении темы.

Паттерн 3: Контекст с useReducer для сложного состояния

Для управления сложной логикой состояния отличным подходом является сочетание Context API с useReducer. useReducer предоставляет структурированный способ обновления состояния на основе действий, а Context API позволяет вам делиться этим состоянием и функцией dispatch по всему приложению.

Пример: простой список дел (Todo List)

// TodoContext.js
import React, { createContext, useContext, useReducer, ReactNode } from 'react';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
}

type TodoAction = 
  | { type: 'ADD_TODO'; text: string } 
  | { type: 'TOGGLE_TODO'; id: number } 
  | { type: 'DELETE_TODO'; id: number };

interface TodoContextType {
  state: TodoState;
  dispatch: React.Dispatch;
}

const initialState: TodoState = {
  todos: [],
};

const todoReducer = (state: TodoState, action: TodoAction): TodoState => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, { id: Date.now(), text: action.text, completed: false }],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
        ),
      };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.id),
      };
    default:
      return state;
  }
};

const TodoContext = createContext(undefined);

interface TodoProviderProps {
  children: ReactNode;
}

export const TodoProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(todoReducer, initialState);

  const value: TodoContextType = {
    state,
    dispatch,
  };

  return {children};
};

export const useTodo = () => {
  const context = useContext(TodoContext);
  if (!context) {
    throw new Error('useTodo must be used within a TodoProvider');
  }
  return context;
};

// Использование
import { useTodo, TodoProvider } from './TodoContext';

function TodoList() {
  const { state, dispatch } = useTodo();

  return (
    

      {state.todos.map((todo) => (
        

          
            {todo.text}
          
           dispatch({ type: 'TOGGLE_TODO', id: todo.id })}>Toggle
           dispatch({ type: 'DELETE_TODO', id: todo.id })}>Delete
        
      ))}
    
  );
}

function AddTodo() {
  const { dispatch } = useTodo();
  const [text, setText] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch({ type: 'ADD_TODO', text });
    setText('');
  };

  return (
    

       setText(e.target.value)} />
      Add Todo
    
  );
}

function App() {
  return (
    
      
      
    
  );
}

export default App;

Этот паттерн централизует логику управления состоянием в редьюсере, что упрощает понимание и тестирование. Компоненты могут отправлять действия для обновления состояния, не управляя им напрямую.

Паттерн 4: Оптимизированные обновления контекста с помощью `useMemo` и `useCallback`

Как упоминалось ранее, ключевым аспектом производительности при работе с Context API являются ненужные перерисовки. Использование useMemo и useCallback может предотвратить эти перерисовки, гарантируя, что обновляются только необходимые части значения контекста, а ссылки на функции остаются стабильными.

Пример: оптимизация контекста темы

// OptimizedThemeContext.js
import React, { createContext, useContext, useState, useMemo, useCallback, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
}

const defaultTheme: Theme = {
    background: 'white',
    color: 'black'
};

const darkTheme: Theme = {
    background: 'black',
    color: 'white'
};

const ThemeContext = createContext({
    theme: defaultTheme,
    toggleTheme: () => {}
});

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC = ({ children }) => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  const theme = isDarkTheme ? darkTheme : defaultTheme;

  const toggleTheme = useCallback(() => {
    setIsDarkTheme(!isDarkTheme);
  }, [isDarkTheme]);

  const value: ThemeContextType = useMemo(() => ({
    theme,
    toggleTheme,
  }), [theme, toggleTheme]);

  return {children};
};

export const useTheme = () => {
  return useContext(ThemeContext);
};

Объяснение:

• useCallback мемоизирует функцию toggleTheme. Это гарантирует, что ссылка на функцию изменяется только при изменении isDarkTheme, предотвращая ненужные перерисовки компонентов, которые зависят только от функции toggleTheme.
• useMemo мемоизирует значение контекста. Это гарантирует, что значение контекста изменяется только при изменении theme или функции toggleTheme, что дополнительно предотвращает ненужные перерисовки.

Без useCallback функция toggleTheme создавалась бы заново при каждой отрисовке ThemeProvider, что приводило бы к изменению value и вызывало бы перерисовки во всех использующих компонентах, даже если сама тема не изменилась. useMemo гарантирует, что новое value создается только тогда, когда изменяются его зависимости (theme или toggleTheme).

Паттерн 5: Селекторы контекста

Селекторы контекста позволяют компонентам подписываться только на определенные части значения контекста. Это предотвращает ненужные перерисовки, когда изменяются другие части контекста. Для этого можно использовать библиотеки, такие как `use-context-selector`, или кастомные реализации.

Пример использования кастомного селектора контекста

// useCustomContextSelector.js
import { useContext, useState, useRef, useEffect } from 'react';

function useCustomContextSelector(
  context: React.Context,
  selector: (value: T) => S
): S {
  const value = useContext(context);
  const [selected, setSelected] = useState(() => selector(value));
  const latestSelector = useRef(selector);
  latestSelector.current = selector;

  useEffect(() => {
    let didUnmount = false;
    let lastSelected = selected;

    const subscription = () => {
      if (didUnmount) {
        return;
      }
      const nextSelected = latestSelector.current(value);
      if (!Object.is(lastSelected, nextSelected)) {
        lastSelected = nextSelected;
        setSelected(nextSelected);
      }
    };

    // Обычно здесь вы бы подписались на изменения контекста. Поскольку это упрощенный
    // пример, мы просто вызовем подписку немедленно для инициализации.
    subscription();

    return () => {
      didUnmount = true;
      // Здесь отпишитесь от изменений контекста, если это применимо.
    };
  }, [value]); // Перезапускать эффект при каждом изменении значения контекста

  return selected;
}

export default useCustomContextSelector;

// ThemeContext.js (упрощено для краткости)
import React, { createContext, useState, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  setTheme: (newTheme: Theme) => void; 
}

const ThemeContext = createContext(undefined);

interface ThemeProviderProps {
  children: ReactNode;
  initialTheme: Theme;
}

export const ThemeProvider: React.FC = ({ children, initialTheme }) => {
  const [theme, setTheme] = useState(initialTheme);

  const value: ThemeContextType = {
    theme,
    setTheme
  };

  return {children};
};

export const useThemeContext = () => {
    const context = React.useContext(ThemeContext);
    if (!context) {
        throw new Error("useThemeContext must be used within a ThemeProvider");
    }
    return context;
};

export default ThemeContext;

// Использование
import useCustomContextSelector from './useCustomContextSelector';
import ThemeContext, { ThemeProvider, useThemeContext } from './ThemeContext';

function BackgroundComponent() {
  const background = useCustomContextSelector(ThemeContext, (context) => context.theme.background);
  return 
Background
;
}

function ColorComponent() {
  const color = useCustomContextSelector(ThemeContext, (context) => context.theme.color);
  return 
Color
;
}

function App() {
  const { theme, setTheme } = useThemeContext();

  const toggleTheme = () => {
    setTheme({ background: theme.background === 'white' ? 'black' : 'white', color: theme.color === 'black' ? 'white' : 'black' });
  };

  return (
    
      Toggle Theme
      
      
    
  );
}

export default App;

В этом примере BackgroundComponent перерисовывается только при изменении свойства background темы, а ColorComponent — только при изменении свойства color. Это позволяет избежать ненужных перерисовок, когда изменяется все значение контекста.

Паттерн 6: Отделение действий от состояния

Для больших приложений рассмотрите возможность разделения значения контекста на два отдельных контекста: один для состояния и другой для действий (функций dispatch). Это может улучшить организацию кода и тестируемость.

Пример: список дел с разделенными контекстами состояния и действий

// TodoStateContext.js
import React, { createContext, useContext, useReducer, ReactNode } from 'react';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
}

const initialState: TodoState = {
  todos: [],
};

const TodoStateContext = createContext(initialState);

interface TodoStateProviderProps {
  children: ReactNode;
}

export const TodoStateProvider: React.FC = ({ children }) => {
  const [state] = useReducer(todoReducer, initialState);

  return {children};
};

export const useTodoState = () => {
  return useContext(TodoStateContext);
};

// TodoActionContext.js
import React, { createContext, useContext, Dispatch, ReactNode } from 'react';

type TodoAction = 
  | { type: 'ADD_TODO'; text: string } 
  | { type: 'TOGGLE_TODO'; id: number } 
  | { type: 'DELETE_TODO'; id: number };

const TodoActionContext = createContext | undefined>(undefined);

interface TodoActionProviderProps {
    children: ReactNode;
}

export const TodoActionProvider: React.FC = ({children}) => {
    const [, dispatch] = useReducer(todoReducer, initialState);

    return {children};
};


export const useTodoDispatch = () => {
  const dispatch = useContext(TodoActionContext);
  if (!dispatch) {
    throw new Error('useTodoDispatch must be used within a TodoActionProvider');
  }
  return dispatch;
};

// todoReducer.js
export const todoReducer = (state: TodoState, action: TodoAction): TodoState => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, { id: Date.now(), text: action.text, completed: false }],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
        ),
      };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.id),
      };
    default:
      return state;
  }
};

// Использование
import { useTodoState, TodoStateProvider } from './TodoStateContext';
import { useTodoDispatch, TodoActionProvider } from './TodoActionContext';

function TodoList() {
  const state = useTodoState();

  return (
    

      {state.todos.map((todo) => (
        

          
            {todo.text}
          
          
        
      ))}
    
  );
}

function TodoActions({ todo }) {
  const dispatch = useTodoDispatch();

  return (
    <>
       dispatch({ type: 'TOGGLE_TODO', id: todo.id })}>Toggle
       dispatch({ type: 'DELETE_TODO', id: todo.id })}>Delete
    
  );
}

function AddTodo() {
  const dispatch = useTodoDispatch();
  const [text, setText] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch({ type: 'ADD_TODO', text });
    setText('');
  };

  return (
    

       setText(e.target.value)} />
      Add Todo
    
  );
}


function App() {
  return (
    
      
        
        
      
    
  );
}

export default App;

Это разделение позволяет компонентам подписываться только на тот контекст, который им нужен, сокращая ненужные перерисовки. Также это упрощает модульное тестирование редьюсера и каждого компонента в отдельности. Кроме того, важен порядок обертывания провайдеров. ActionProvider должен оборачивать StateProvider.

Лучшие практики и рекомендации

• Контекст не должен заменять все библиотеки управления состоянием: для очень больших и сложных приложений специализированные библиотеки управления состоянием, такие как Redux или Zustand, могут быть лучшим выбором.
• Избегайте чрезмерного использования контекста: не каждая часть состояния должна находиться в контексте. Используйте контекст разумно для действительно глобального или широко используемого состояния.
• Тестирование производительности: всегда измеряйте влияние использования контекста на производительность, особенно при работе с часто обновляемым состоянием.
• Разделение кода (Code Splitting): при использовании Context API рассмотрите возможность разделения вашего приложения на более мелкие части. Это особенно важно, когда небольшое изменение состояния вызывает перерисовку большой части приложения.

Заключение

React Context API — это универсальный инструмент для управления состоянием. Понимая и применяя эти продвинутые паттерны, вы можете эффективно управлять сложным состоянием, оптимизировать производительность и создавать более поддерживаемые и масштабируемые приложения на React. Не забывайте выбирать правильный паттерн для ваших конкретных нужд и тщательно обдумывать последствия использования контекста для производительности.

По мере развития React будут развиваться и лучшие практики, связанные с Context API. Оставаясь в курсе новых техник и библиотек, вы будете готовы к решению задач управления состоянием в современной веб-разработке. Рассмотрите возможность изучения новых паттернов, таких как использование контекста с сигналами для еще более точной реактивности.