Hooks personnalisés dans React

Les hooks personnalisés dans React sont une fonctionnalité puissante qui vous permet d'extraire et de réutiliser la logique sur plusieurs composants. Ils vous permettent d'encapsuler une logique avec état complexe, rendant vos composants plus propres et plus faciles à entretenir. Voici un aperçu rapide et un exemple de la façon de créer et d’utiliser des hooks personnalisés.

Création d'un crochet personnalisé

Un hook personnalisé est essentiellement une fonction JavaScript dont le nom commence par use et qui peut appeler d'autres hooks à l'intérieur. Voici un exemple simple de hook personnalisé qui gère un compteur :

import { useState } from 'react';

// Custom Hook: useCounter
function useCounter(initialValue = 0) {
    const [count, setCount] = useState(initialValue);

    const increment = () => setCount(c => c + 1);
    const decrement = () => setCount(c => c - 1);
    const reset = () => setCount(initialValue);

    return { count, increment, decrement, reset };
}

export default useCounter;

Utilisation du crochet personnalisé

Vous pouvez utiliser le hook useCounter dans n'importe quel composant fonctionnel :

import React from 'react';
import useCounter from './useCounter';

function CounterComponent() {
    const { count, increment, decrement, reset } = useCounter(0);

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
            <button onClick={reset}>Reset</button>
        </div>
    );
}

export default CounterComponent;

Points clés

1. Convention de dénomination : commencez toujours le nom du hook personnalisé par use pour suivre la convention de React.
2. Réutilisabilité : les hooks personnalisés peuvent être réutilisés sur plusieurs composants, favorisant ainsi le code DRY (Don't Repeat Yourself).
3. Gestion de l'état : vous pouvez gérer l'état, effectuer des effets secondaires et exploiter d'autres hooks au sein d'un hook personnalisé.

Exemple avancé : récupération de données

Voici un hook personnalisé plus avancé pour récupérer des données :

import { useState, useEffect } from 'react';

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(url);
                if (!response.ok) throw new Error('Network response was not ok');
                const result = await response.json();
                setData(result);
            } catch (error) {
                setError(error);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, [url]);

    return { data, loading, error };
}

export default useFetch;

Usage

Vous pouvez utiliser le hook useFetch dans un composant pour récupérer des données :

import React from 'react';
import useFetch from './useFetch';

function DataFetchingComponent() {
    const { data, loading, error } = useFetch('https://api.example.com/data');

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error: {error.message}</p>;

    return (
        <div>
            <h1>Data:</h1>
            <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}