Les hooks sont une nouvelle fonctionnalité introduite dans React 16.8. Ils permettent de gérer l’état et le cycle de vie des composants directement dans les fonctions, sans avoir besoin de créer une classe de composants.
1. Utilisation de useState:
L’hook `useState` est une méthode qui vous permet d’ajouter un état local React à vos fonctions. Voici comment l’utiliser:
```
import React, { useState } from ‘react’;
function Example() { // Déclare une nouvelle variable d’état, que nous appellerons “count“ const [count, setCount] = useState(0);
return (Vous avez cliqué {count} fois
1. Utilisation de useEffect:
L’hook `useEffect` est une méthode qui gère les effets secondaires dans vos composants fonctionnels. Vous pouvez l’utiliser pour diverses choses comme les données de fetch, la gestion des timers, etc.
```
import React, { useState, useEffect } from ‘react’;
function Example() { const [count, setCount] = useState(0);
// Similaire à componentDidMount et componentDidUpdate : useEffect(() => { // Met à jour le titre du document en utilisant l’API du navigateur document.title = `Vous avez cliqué ${count} fois`; }); return (Vous avez cliqué {count} fois
1. Creating your own Hooks:
Vous pouvez également créer vos propres Hooks pour réutiliser l’état et la logique comportementale sans modifier la hiérarchie des composants.
```
import { useState, useEffect } from ‘react’;
function useFetch(url) { const [data, setData] = useState(null);
useEffect(() => { fetch(url) .then(response => response.json()) .then(data => setData(data)); }, [url]); return data; }function Example() { const data = useFetch(‘https://api.example.com’);
return (