Wat zijn React Hooks en hoe gebruik je ze?

React Hooks zijn functies die React-functionaliteit toevoegen aan functionele componenten. Vóór de introductie van Hooks in React 16.8, konden alleen class componenten state- en lifecycle-methoden gebruiken. Met React Hooks kunnen ontwikkelaars bepaalde React-functies gebruiken, zoals state en lifecycle-methoden, binnen functionele componenten.

Er zijn twee hoofdtypen van React Hooks die je moet kennen:

- useState: Dit is een hook waarmee state kan worden gebruikt in een functioneel component.

Bijvoorbeeld:

```
import React, { useState } from ‘react’;

function Example() { const [count, setCount] = useState(0);

return (

You clicked {count} times

); } ``` In dit voorbeeld initializeert `useState(0)` een nieuwe state-variabele, `count`, op de waarde `0`. `setCount` is een functie die we kunnen aanroepen om de waarde van `count` te updaten.

- useEffect: Deze hook is vergelijkbaar met de lifecycle-methoden componentDidMount, componentDidUpdate en componentWillUnmount in class componenten. Het wordt gebruikt om zij-effecten uit te voeren na renderen.

Bijvoorbeeld:

```
import React, { useState, useEffect } from ‘react’;

function Example() { const [count, setCount] = useState(0);

useEffect(() => { document.title = `You clicked ${count} times`; }); return (

You clicked {count} times

); } ``` In het bovenstaande voorbeeld gebruikt useEffect de `count` state-variabele om de titel van het document bij te werken na elke render.

Er zijn ook vele andere custom Hooks beschikbaar die meer specifieke gedragingen mogelijk maken.