Pokročilé vzory React Context API pre správu stavu

React Context API poskytuje silný mechanizmus na zdieľanie stavu naprieč vašou aplikáciou bez tzv. „prop drillingu“. Zatiaľ čo základné použitie je jednoduché, využitie jeho plného potenciálu si vyžaduje pochopenie pokročilých vzorov, ktoré dokážu zvládnuť komplexné scenáre správy stavu. Tento článok skúma niekoľko z týchto vzorov, ponúka praktické príklady a užitočné poznatky na pozdvihnutie vášho vývoja v Reacte.

Pochopenie obmedzení základného Context API

Predtým, než sa ponoríme do pokročilých vzorov, je dôležité si uvedomiť obmedzenia základného Context API. Hoci je vhodné pre jednoduchý, globálne dostupný stav, môže sa stať neprehľadným a neefektívnym pre zložité aplikácie s často sa meniacim stavom. Každý komponent, ktorý konzumuje kontext, sa prekreslí vždy, keď sa hodnota kontextu zmení, aj keď komponent nezávisí od konkrétnej časti stavu, ktorá bola aktualizovaná. To môže viesť k výkonnostným problémom.

Vzor 1: Zložené komponenty s kontextom

Vzor zložených komponentov (Compound Component) rozširuje Context API vytvorením sady súvisiacich komponentov, ktoré implicitne zdieľajú stav a logiku prostredníctvom kontextu. Tento vzor podporuje znovupoužiteľnosť a zjednodušuje API pre používateľov. Umožňuje to zapuzdriť zložitú logiku do jednoduchej implementácie.

Príklad: Komponent kariet (Tab)

Ukážme si to na príklade komponentu kariet (Tab). Namiesto posielania props cez viacero vrstiev, komponenty Tab implicitne komunikujú prostredníctvom zdieľaného kontextu.

// 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 (
    
  );
};

// Použitie
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;

Výhody:

• Zjednodušené API pre používateľov: Používatelia sa musia starať len o Tab, TabList a TabPanel.
• Implicitné zdieľanie stavu: Komponenty automaticky pristupujú k zdieľanému stavu a aktualizujú ho.
• Zlepšená znovupoužiteľnosť: Komponent Tab sa dá ľahko znova použiť v rôznych kontextoch.

Vzor 2: Dynamické kontexty

V niektorých scenároch môžete potrebovať rôzne hodnoty kontextu na základe pozície komponentu v strome komponentov alebo iných dynamických faktorov. Dynamické kontexty vám umožňujú vytvárať a poskytovať hodnoty kontextu, ktoré sa menia na základe špecifických podmienok.

Príklad: Témovanie s dynamickými kontextami

Zvážte systém témovania, kde chcete poskytovať rôzne témy na základe preferencií používateľa alebo sekcie aplikácie, v ktorej sa nachádza. Môžeme si ukázať zjednodušený príklad so svetlou a tmavou témou.

// 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);
};

// Použitie
import { useTheme, ThemeProvider } from './ThemeContext';

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

  return (
    

      
This is a themed component.
      Toggle Theme
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

V tomto príklade ThemeProvider dynamicky určuje tému na základe stavu isDarkTheme. Komponenty používajúce hook useTheme sa automaticky prekreslia, keď sa téma zmení.

Vzor 3: Kontext s useReducer pre komplexný stav

Pre správu zložitej logiky stavu je kombinácia Context API s useReducer vynikajúcim prístupom. useReducer poskytuje štruktúrovaný spôsob aktualizácie stavu na základe akcií a Context API umožňuje zdieľať tento stav a dispatch funkciu naprieč vašou aplikáciou.

Príklad: Jednoduchý zoznam úloh (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;
};

// Použitie
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;

Tento vzor centralizuje logiku správy stavu v rámci reducera, čo uľahčuje uvažovanie o nej a jej testovanie. Komponenty môžu odosielať akcie na aktualizáciu stavu bez toho, aby museli priamo spravovať stav.

Vzor 4: Optimalizované aktualizácie kontextu s `useMemo` a `useCallback`

Ako už bolo spomenuté, kľúčovým aspektom výkonnosti pri Context API sú zbytočné prekreslenia. Použitie useMemo a useCallback môže zabrániť týmto prekresleniam tým, že zabezpečí aktualizáciu len nevyhnutných častí hodnoty kontextu a že referencie na funkcie zostanú stabilné.

Príklad: Optimalizácia kontextu témy

// 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);
};

Vysvetlenie:

• useCallback memoizuje funkciu toggleTheme. Tým sa zabezpečí, že referencia na funkciu sa zmení len vtedy, keď sa zmení isDarkTheme, čím sa zabráni zbytočným prekresleniam komponentov, ktoré závisia iba od funkcie toggleTheme.
• useMemo memoizuje hodnotu kontextu. Tým sa zabezpečí, že hodnota kontextu sa zmení len vtedy, keď sa zmení buď theme alebo funkcia toggleTheme, čo ďalej zabraňuje zbytočným prekresleniam.

Bez useCallback by sa funkcia toggleTheme vytvárala pri každom prekreslení ThemeProvider, čo by spôsobilo zmenu value a spustilo by prekreslenia v akýchkoľvek konzumujúcich komponentoch, aj keby sa samotná téma nezmenila. useMemo zabezpečuje, že nová value sa vytvorí len vtedy, keď sa zmenia jej závislosti (theme alebo toggleTheme).

Vzor 5: Selektory kontextu

Selektory kontextu umožňujú komponentom odoberať len špecifické časti hodnoty kontextu. Tým sa zabráni zbytočným prekresleniam, keď sa zmenia iné časti kontextu. Na dosiahnutie tohto cieľa sa dajú použiť knižnice ako `use-context-selector` alebo vlastné implementácie.

Príklad použitia vlastného selektora kontextu

// 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);
      }
    };

    // Tu by ste sa typicky prihlásili na odber zmien kontextu. Keďže ide o zjednodušený
    // príklad, zavoláme subscription okamžite na inicializáciu.
    subscription();

    return () => {
      didUnmount = true;
      // Tu sa odhláste od odberu zmien kontextu, ak je to relevantné.
    };
  }, [value]); // Znovu spustiť efekt vždy, keď sa hodnota kontextu zmení

  return selected;
}

export default useCustomContextSelector;

// ThemeContext.js (Zjednodušené pre stručnosť)
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;

// Použitie
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;

V tomto príklade sa BackgroundComponent prekreslí iba vtedy, keď sa zmení vlastnosť background témy, a ColorComponent sa prekreslí iba vtedy, keď sa zmení vlastnosť color. Tým sa zabráni zbytočným prekresleniam, keď sa zmení celá hodnota kontextu.

Vzor 6: Oddelenie akcií od stavu

Pre väčšie aplikácie zvážte rozdelenie hodnoty kontextu do dvoch odlišných kontextov: jeden pre stav a druhý pre akcie (dispatch funkcie). To môže zlepšiť organizáciu kódu a testovateľnosť.

Príklad: Zoznam úloh s oddelenými kontextami pre stav a akcie

// 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;
  }
};

// Použitie
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;

Toto oddelenie umožňuje komponentom prihlásiť sa len na odber kontextu, ktorý potrebujú, čím sa znižuje počet zbytočných prekreslení. Taktiež uľahčuje unit testovanie reducera a každého komponentu izolovane. Dôležité je aj poradie obaľovania providermi. ActionProvider musí obaľovať StateProvider.

Osvedčené postupy a odporúčania

• Kontext by nemal nahrádzať všetky knižnice na správu stavu: Pre veľmi veľké a zložité aplikácie môžu byť dedikované knižnice na správu stavu ako Redux alebo Zustand stále lepšou voľbou.
• Vyhnite sa nadmernému používaniu kontextu: Nie každá časť stavu musí byť v kontexte. Používajte kontext uvážlivo pre skutočne globálny alebo široko zdieľaný stav.
• Testovanie výkonu: Vždy merajte vplyv použitia kontextu na výkon, najmä pri práci s často sa aktualizujúcim stavom.
• Rozdelenie kódu (Code Splitting): Pri používaní Context API zvážte rozdelenie vašej aplikácie na menšie časti. Je to dôležité najmä vtedy, keď malá zmena v stave spôsobí prekreslenie veľkej časti aplikácie.

Záver

React Context API je všestranný nástroj na správu stavu. Pochopením a aplikovaním týchto pokročilých vzorov môžete efektívne spravovať komplexný stav, optimalizovať výkon a budovať udržiavateľnejšie a škálovateľnejšie React aplikácie. Nezabudnite si vybrať správny vzor pre vaše špecifické potreby a dôkladne zvážiť dôsledky použitia kontextu na výkon.

Ako sa vyvíja React, tak sa budú vyvíjať aj osvedčené postupy týkajúce sa Context API. Zostať informovaný o nových technikách a knižniciach vám zabezpečí, že budete pripravení zvládnuť výzvy správy stavu v modernom webovom vývoji. Zvážte preskúmanie nových vzorov, ako je napríklad použitie kontextu so signálmi pre ešte jemnejšiu reaktivitu.