Avanserte Mønstre for Tilstandshåndtering med React Context API

React Context API tilbyr en kraftig mekanisme for å dele tilstand på tvers av applikasjonen uten "prop drilling". Selv om grunnleggende bruk er enkel, krever det å utnytte det fulle potensialet en forståelse av avanserte mønstre som kan håndtere komplekse scenarioer for tilstandshåndtering. Denne artikkelen utforsker flere av disse mønstrene, og tilbyr praktiske eksempler og handlingsrettet innsikt for å heve din React-utvikling.

Forstå Begrensningene ved Grunnleggende Context API

Før vi dykker ned i avanserte mønstre, er det avgjørende å anerkjenne begrensningene ved grunnleggende Context API. Selv om det egner seg for enkel, globalt tilgjengelig tilstand, kan det bli uhåndterlig og ineffektivt for komplekse applikasjoner med tilstand som endres ofte. Hver komponent som konsumerer en kontekst re-rendres hver gang kontekstverdien endres, selv om komponenten ikke er avhengig av den spesifikke delen av tilstanden som ble oppdatert. Dette kan føre til ytelsesflaskehalser.

Mønster 1: Sammensatte Komponenter med Context

Mønsteret med sammensatte komponenter (Compound Components) forbedrer Context API ved å skape en serie relaterte komponenter som implisitt deler tilstand og logikk gjennom en kontekst. Dette mønsteret fremmer gjenbrukbarhet og forenkler API-et for forbrukerne. Dette gjør at kompleks logikk kan innkapsles med en enkel implementering.

Eksempel: En Fane-komponent

La oss illustrere dette med en fane-komponent (Tab). I stedet for å sende props ned gjennom flere lag, kommuniserer Tab-komponentene implisitt gjennom en delt kontekst.

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

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

Fordeler:

• Forenklet API for forbrukere: Brukere trenger kun å bekymre seg for Tab, TabList og TabPanel.
• Implisitt tilstandsdeling: Komponentene får automatisk tilgang til og oppdaterer den delte tilstanden.
• Forbedret gjenbrukbarhet: Tab-komponenten kan enkelt gjenbrukes i forskjellige kontekster.

Mønster 2: Dynamiske Kontekster

I noen scenarioer kan du trenge forskjellige kontekstverdier basert på komponentens posisjon i komponenttreet eller andre dynamiske faktorer. Dynamiske kontekster lar deg opprette og tilby kontekstverdier som varierer basert på spesifikke betingelser.

Eksempel: Temahåndtering med Dynamiske Kontekster

Tenk deg et temasystem der du ønsker å tilby forskjellige temaer basert på brukerens preferanser eller den delen av applikasjonen de befinner seg i. Vi kan lage et forenklet eksempel med lyst og mørkt tema.

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

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

I dette eksempelet bestemmer ThemeProvider dynamisk temaet basert på isDarkTheme-tilstanden. Komponenter som bruker useTheme-hooken vil automatisk re-rendres når temaet endres.

Mønster 3: Context med useReducer for Kompleks Tilstand

For å håndtere kompleks tilstandslogikk er det en utmerket tilnærming å kombinere Context API med useReducer. useReducer gir en strukturert måte å oppdatere tilstand basert på handlinger (actions), og Context API lar deg dele denne tilstanden og dispatch-funksjonen på tvers av applikasjonen din.

Eksempel: En Enkel Huskeliste

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

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

Dette mønsteret sentraliserer logikken for tilstandshåndtering i reduseren, noe som gjør det enklere å resonnere rundt og teste. Komponenter kan sende handlinger (dispatch actions) for å oppdatere tilstanden uten å måtte håndtere tilstanden direkte.

Mønster 4: Optimaliserte Kontekstoppdateringer med `useMemo` og `useCallback`

Som nevnt tidligere, er en viktig ytelsesvurdering med Context API unødvendige re-rendringer. Bruk av useMemo og useCallback kan forhindre disse re-rendringene ved å sikre at kun de nødvendige delene av kontekstverdien oppdateres, og at funksjonsreferanser forblir stabile.

Eksempel: Optimalisering av en Tema-kontekst

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

Forklaring:

• useCallback memoiserer toggleTheme-funksjonen. Dette sikrer at funksjonsreferansen kun endres når isDarkTheme endres, og forhindrer unødvendige re-rendringer av komponenter som kun er avhengige av toggleTheme-funksjonen.
• useMemo memoiserer kontekstverdien. Dette sikrer at kontekstverdien kun endres når enten theme eller toggleTheme-funksjonen endres, noe som ytterligere forhindrer unødvendige re-rendringer.

Uten useCallback ville toggleTheme-funksjonen blitt gjenskapt ved hver rendering av ThemeProvider, noe som ville ført til at value endret seg og utløst re-rendringer i alle forbrukende komponenter, selv om selve temaet ikke hadde endret seg. useMemo sikrer at en ny value kun opprettes når dens avhengigheter (theme eller toggleTheme) endres.

Mønster 5: Kontekst-selektorer

Kontekst-selektorer lar komponenter abonnere på kun spesifikke deler av kontekstverdien. Dette forhindrer unødvendige re-rendringer når andre deler av konteksten endres. Biblioteker som `use-context-selector` eller egendefinerte implementeringer kan brukes for å oppnå dette.

Eksempel med en Egendefinert Kontekst-selektor

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

    // You would typically subscribe to context changes here. Since this is a simplified
    // example, we'll just call subscription immediately to initialize.
    subscription();

    return () => {
      didUnmount = true;
      // Unsubscribe from context changes here, if applicable.
    };
  }, [value]); // Re-run effect whenever the context value changes

  return selected;
}

export default useCustomContextSelector;

// ThemeContext.js (Simplified for brevity)
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;

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

I dette eksempelet vil BackgroundComponent kun re-rendre når background-egenskapen til temaet endres, og ColorComponent vil kun re-rendre når color-egenskapen endres. Dette unngår unødvendige re-rendringer når hele kontekstverdien endres.

Mønster 6: Å Skille Handlinger fra Tilstand

For større applikasjoner bør du vurdere å skille kontekstverdien i to separate kontekster: én for tilstanden og en annen for handlingene (dispatch-funksjoner). Dette kan forbedre kodens organisering og testbarhet.

Eksempel: Huskeliste med Separate Kontekster for Tilstand og Handlinger

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

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

Denne separasjonen lar komponenter kun abonnere på den konteksten de trenger, noe som reduserer unødvendige re-rendringer. Det gjør det også enklere å enhetsteste reduseren og hver komponent isolert. Merk også at rekkefølgen på provider-innpakningen er viktig. ActionProvider må omslutte StateProvider.

Beste Praksis og Vurderinger

• Context bør ikke erstatte alle biblioteker for tilstandshåndtering: For svært store og komplekse applikasjoner kan dedikerte biblioteker for tilstandshåndtering som Redux eller Zustand fortsatt være et bedre valg.
• Unngå overdreven bruk av kontekst: Ikke all tilstand trenger å være i en kontekst. Bruk kontekst med omhu for tilstand som er genuint global eller delt bredt.
• Ytelsestesting: Mål alltid ytelseseffekten av kontekstbruken din, spesielt når du håndterer tilstand som oppdateres ofte.
• Kode-oppdeling (Code Splitting): Når du bruker Context API, bør du vurdere å dele opp applikasjonen din i mindre biter. Dette er spesielt viktig når en liten endring i tilstanden fører til at en stor del av applikasjonen re-rendres.

Konklusjon

React Context API er et allsidig verktøy for tilstandshåndtering. Ved å forstå og anvende disse avanserte mønstrene kan du effektivt håndtere kompleks tilstand, optimalisere ytelse og bygge mer vedlikeholdbare og skalerbare React-applikasjoner. Husk å velge riktig mønster for dine spesifikke behov og å nøye vurdere ytelsesimplikasjonene av din kontekstbruk.

Ettersom React utvikler seg, vil også beste praksis rundt Context API gjøre det. Å holde seg informert om nye teknikker og biblioteker vil sikre at du er rustet til å håndtere utfordringene med tilstandshåndtering i moderne webutvikling. Vurder å utforske nye mønstre, som å bruke kontekst med signaler for enda mer finkornet reaktivitet.