Les React Hooks révolutionnent la manière dont les développeurs créent et gèrent les états et autres fonctionnalités dans les composants fonctionnels de React. Comprendre et utiliser les React Hooks peut améliorer considérablement l’efficacité et la lisibilité de votre code. Découvrons ensemble ce que sont les Hooks React et comment ils fonctionnent à travers un guide détaillé et des exemples concrets.

React Hooks Introduction

Les React Hooks, introduits dans la version 16.8 de React, permettent d’utiliser l’état et d’autres fonctionnalités de React dans les composants fonctionnels. Avant les Hooks, il était nécessaire d’utiliser des composants de classe pour gérer l’état et le cycle de vie. Aujourd’hui, avec les Hooks, les développeurs peuvent écrire des composants plus compacts et plus faciles à maintenir.

Les Hooks les plus couramment utilisés sont useState et useEffect. Ils remplacent respectivement les états locaux et les méthodes de cycle de vie dans les composants de classe. Avant d’entrer dans les détails de ces Hooks, voyons d’abord comment les utiliser de manière basique.

Utilisation Basique de useState

Le Hook useState est utilisé pour ajouter un état local à un composant fonctionnel. Voici un exemple simple de l’utilisation de useState. Pour aller plus loin, découvrez comment démarrer avec React :

import React, { useState } from 'react';

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

    return (
        

            
Vous avez cliqué {count} fois

            
        

    );
}

export default Counter;

Utilisation Basique de useEffect

Le Hook useEffect vous permet d’exécuter des effets de côté dans vos composants fonctionnels, comme les appels API, les abonnements à des événements, et bien plus encore. Voici un exemple simple :

import React, { useState, useEffect } from 'react';

function Example() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data));
    }, []);

    return (
        

            
{JSON.stringify(data, null, 2)}

        

    );
}

export default Example;

Utilisation Avancée de useEffect

Vous pouvez également utiliser le Hook useEffect pour gérer le cycle de vie du composant, par exemple en nettoyant les abonnements ou les minuteries. Voici un exemple :

import React, { useState, useEffect } from 'react';

function Timer() {
    const [seconds, setSeconds] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setSeconds(seconds => seconds + 1);
        }, 1000);

        return () => clearInterval(interval);
    }, []);

    return (
        

            {seconds} secondes se sont écoulées depuis que vous avez ouvert cette page.
        

    );
}

export default Timer;

Dessiner Composants en utilisant les Hooks de Poignée

En utilisant les React Hooks, vous pouvez structurer de manière optimale la logique des composants, permettant une réutilisabilité et un test plus facile du code. Voici comment utiliser les Hooks personnalisés :

import React, { useState, useEffect } from 'react';

// Hook personnalisé pour gérer la fenêtre
function useWindowWidth() {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        const handleResize = () => setWidth(window.innerWidth);
        
        window.addEventListener('resize', handleResize);
        
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);

    return width;
}

function WindowWidth() {
    const width = useWindowWidth();

    return (
        

            La largeur de la fenêtre est : {width}px
        

    );
}

export default WindowWidth;

Pour mieux comprendre la façon dont React facilite la gestion de l’état et des cycles de vie, il est utile de comparer les composants par classe et les composants fonctionnels.