Wat is useContext in React?

useContext is een hook in React waarmee functionele componenten zich kunnen abonneren op wijzigingen in de context. Het biedt een manier om gegevens door de componentboom te sturen zonder expliciet props op elk niveau door te geven.

Werking:

1. Context maken: Gebruik React.createContext() om een contextobject te maken. Dit object bevat een Provider en een Consumer (of gebruik useContext in functionele componenten).
2. Waarde verstrekken: De Provider van de context omgeeft de componentenboom die toegang tot de waarde nodig heeft. Via de prop value wordt de waarde doorgegeven die beschikbaar is voor alle geabonneerde componenten.
3. Waarde ophalen: useContext(MyContext) wordt binnen een functionele component aangeroepen, waarbij MyContext de eerder gemaakte context is. De hook geeft de huidige waarde van de context terug. Wanneer deze waarde verandert, wordt de component die useContext gebruikt automatisch opnieuw gerenderd.

Voordelen:

• Eenvoudig gegevens doorgeven: Verwijdert de noodzaak van "prop drilling" door meerdere tussenliggende componenten.
• Global state: Handig voor het beheren van de globale toestand van de applicatie (bijvoorbeeld thema, authenticatie, lokalisatie).
• Prestaties: React optimaliseert het opnieuw renderen van componenten die useContext gebruiken, door alleen die te her-renderen die op veranderingen in die context geabonneerd zijn.

Nadelen:

• Debugging moeilijkheid: Het kan moeilijker zijn om te traceren waar de waarde van de context vandaan komt in vergelijking met props.
• Prestaties bij frequente updates: Als de waarde van de context heel vaak wordt bijgewerkt, kan dit leiden tot frequente her-renderingen van alle geabonneerde componenten.

Voorbeeld:

import React, { createContext, useContext } from 'react';

// 1. Context maken
const ThemeContext = createContext('light');

// Provider component
function ThemeProvider({ children }) {
  const theme = 'dark'; // Voorbeeldwaarde
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Component dat de context gebruikt
function ThemedComponent() {
  // 3. Waarde van de context ophalen
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Thema: {theme}</div>;
}

// Applicatie
function App() {
  return (
    <ThemeProvider> {/* 2. Waarde verstrekken */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;