React Hooks en Context hebben de manier waarop we omgaan met state management en gegevensdeling in React-applicaties veranderd. Met de introductie van hooks in versie 16.8 in 2019 kregen ontwikkelaars de mogelijkheid om state en lifecycle-methoden te gebruiken binnen functionele componenten, wat resulteert in beknoptere en beter leesbare code.

Context daarentegen biedt een efficiënte manier om gegevens tussen componenten te delen zonder prop drilling. In deze module wordt de krachtige synergie tussen React hooks en Context onderzocht, waarbij hun gecombineerde potentieel wordt getoond om complexe state management te vereenvoudigen en een soepele gegevensstroom door de componentenboom te faciliteren.

In de volgende hoofdstukken behandelen we in detail het volgende:

State hook

useState stelt een component in staat om informatie te behouden en op te halen (bijvoorbeeld gebruikersinvoer). Een formuliercomponent kan bijvoorbeeld de state gebruiken om de invoerwaarde te bewaren, terwijl een afbeeldingsgalerijcomponent de state kan gebruiken om de geselecteerde afbeeldingindex bij te houden.

function Form() {
  const [value, setValue] = useState('');
  // ...
}

Ref hook

useRef biedt een manier voor een component om niet-renderende informatie te behouden, zoals een DOM-node of een timeout-ID. In tegenstelling tot state veroorzaakt het wijzigen van een ref geen her-rendering van een component. Refs fungeren als een "nooduitgang" uit het typische React-paradigma en zijn nuttig bij interactie met niet-React-systemen, zoals de native browser-API's.

function Form() {
  const inputRef = useRef(null);
  // ...
}

Effect-hook

useEffect stelt een component in staat om verbindingen te maken en te synchroniseren met externe systemen, waaronder netwerkinteracties, manipulatie van de browser-DOM, afhandelen van animaties, integratie van widgets ontwikkeld met verschillende UI-bibliotheken en het naadloos opnemen van niet-React-code.

function Animation({ animationId }) {
  useEffect(() => {
    const animation = createAnimation(animationId);
    animation.start();
    
    // Cleaning up the animation when the component unmounts
    return () => animation.stop();
  }, [animationId]);
  // ...
}

Memo-hook

useMemo verbetert de renderprestaties door onnodige berekeningen te minimaliseren. Bijvoorbeeld, React kan worden geïnstrueerd om een gecachte berekening te hergebruiken of een her-rendering te vermijden als de gegevens sinds de vorige render niet zijn gewijzigd.

function NewspaperList({ data, filter }) {
  const filteredData = useMemo(
    () => performFiltering(data, filter),
    [data, filter]
  );
  // ...
}

Context-hook

useContext stelt een component in staat om informatie van verre ouders te verkrijgen zonder props door te geven. Hiermee kan de bovenliggende component in de app het huidige UI-thema moeiteloos doorgeven aan alle afgeleide componenten, ongeacht hun diepte in de componentenboom.

function Section() {
  const theme = useContext(ThemeContext);
  // ...
}