Maison >interface Web >js tutoriel >Meilleures pratiques de React Custom Hooks : avec des exemples de cas d'utilisation

Meilleures pratiques de React Custom Hooks : avec des exemples de cas d'utilisation

WBOYoriginal: 2024-07-26 13:59:03720parcourir

React Custom Hooks Best Practices: With Example Usecases

Consultez le message original https://devaradise.com/react-custom-hooks-best-practices/ pour le lire avec la table des matières

Si vous êtes un développeur React, vous avez probablement rencontré une situation dans laquelle vous devez partager la logique entre les composants. Dans cet article, nous explorerons ce que sont les hooks personnalisés, quand les utiliser, les meilleures pratiques pour les écrire et quelques cas d'utilisation courants qui rendront vos applications React plus propres et plus maintenables.

Articles connexes sur React

Comment démarrer et configurer un projet React en 2024
Composant fonctionnel React avec des crochets
Réagir aux meilleures pratiques de rendu conditionnel (sinon)

Qu’est-ce qu’un hook personnalisé dans React ?

Un hook personnalisé est une fonction réutilisable avec une logique avec état qui peut être partagée entre les composants React. Ils commencent par l'utilisation du préfixe et peuvent appeler d'autres hooks à l'intérieur d'eux, ce qui permet d'abstraire la logique complexe des états et des effets en fonctions simples et réutilisables.

Les hooks personnalisés React sont parfaits pour les situations où vous devez partager la logique entre différentes parties de votre application sans dupliquer le code. Cela permet non seulement de garder vos composants plus propres, mais favorise également une base de code plus modulaire.

Notez qu'un hook personnalisé est différent d'une fonction réutilisable javascript standard. Le hook personnalisé est avec état, ce qui signifie que vous devez utiliser l'état de réaction avec le hook useState ou d'autres hooks intégrés.

Quand utiliser des hooks personnalisés dans React

Les hooks personnalisés conviennent parfaitement chaque fois que vous avez besoin de réutiliser une logique avec état entre des composants, en particulier pour des tâches complexes telles que la récupération de données, la gestion de formulaires et l'authentification. Ils simplifient le code de vos composants, améliorent la lisibilité et facilitent les tests et la maintenance.

Un autre cas d’utilisation privilégié des hooks personnalisés est lorsque vous vous retrouvez à écrire le même code à plusieurs endroits. Au lieu de copier et coller la même logique, vous pouvez l'extraire dans un hook personnalisé et la réutiliser partout où vous en avez besoin. Cela favorise le principe DRY (Don't Repeat Yourself), rendant votre base de code plus efficace et moins sujette aux erreurs.

Meilleures pratiques pour écrire des hooks personnalisés

Lors de la création de hooks personnalisés, il existe plusieurs bonnes pratiques à garder à l'esprit pour garantir qu'ils sont efficaces et maintenables. Voici quelques directives clés :

1. Commencez par l'utilisation

Commencez toujours le nom de votre hook personnalisé par use. Il s'agit d'une convention qui aide les autres développeurs React à identifier ces fonctions comme des hooks, garantissant ainsi que les règles des hooks sont appliquées correctement.

2. Gardez les crochets purs

Assurez-vous que vos hooks sont de pures fonctions. Évitez les effets secondaires directement à l’intérieur de vos crochets ; à la place, gérez-les à l’aide de useEffect ou de hooks similaires.

Les effets secondaires sont toutes les opérations ou comportements qui se produisent dans un composant après le rendu et qui n'ont pas d'impact direct sur le cycle de rendu du composant actuel.

3. Évitez les rendus inutiles

Utilisez des techniques de mémorisation telles que useMemo ou useCallback pour éviter que vos hooks ne provoquent des rendus inutiles, en particulier lorsqu'il s'agit de calculs coûteux ou de mises à jour d'état complexes.

Exploitez les hooks intégrés tels que useState, useEffect, useReducer et useCallback pour gérer l'état et les effets secondaires dans vos hooks personnalisés.

4. Renvoie des types de valeurs cohérents

Renvoyer un tableau ou un objet avec des types de valeurs cohérents à partir de vos hooks contenant les états, les fonctions ou toute valeur que vous souhaitez exposer. Cela montre clairement ce que fournit le crochet et comment l'utiliser.

5. Écrivez des tests et documentez vos hooks personnalisés

Assurez-vous que vos crochets personnalisés sont bien testés. Utilisez des outils tels que React Testing Library et Jest pour écrire des tests qui valident le comportement de vos hooks.

Fournissez une documentation claire pour vos hooks personnalisés. Expliquez ce qu'ils font, leurs paramètres et leurs valeurs de retour pour les rendre plus faciles à utiliser et à maintenir pour les autres (et pour vous-même).

6. Restez simple

Évitez de rendre vos crochets trop complexes. Si un crochet commence à devenir trop compliqué, envisagez de le diviser en crochets plus petits et plus ciblés.

Assurez-vous que vos crochets n'ont qu'une seule responsabilité.

7. Gérez les erreurs avec élégance

Gérez les erreurs avec élégance dans vos hooks. Cela garantit que vos composants utilisant ces hooks peuvent gérer des scénarios inattendus sans se casser.

Exemples de cas d'utilisation de hooks personnalisés

Voici quelques cas d'utilisation courants de hooks personnalisés que vous pourriez rencontrer dans vos projets React :

1. Récupération de données

Un hook personnalisé pour récupérer des données à partir d'un point de terminaison d'API peut être réutilisé sur différents composants qui doivent récupérer et afficher 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(() => {
        async function fetchData() {
            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 (err) {
                setError(err);
            } finally {
                setLoading(false);
            }
        }

        fetchData();
    }, [url]);

    return { data, loading, error };
}

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

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

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

); };

2. Gestion des formulaires

Les hooks personnalisés peuvent gérer l'état du formulaire, gérer la validation et fournir des gestionnaires de soumission, ce qui rend la gestion des formulaires un jeu d'enfant.

import { useState } from 'react';

function useForm(initialValues) {
    const [values, setValues] = useState(initialValues);
    const [errors, setErrors] = useState({});

    const handleChange = (event) => {
        const { name, value } = event.target;
        setValues({
            ...values,
            [name]: value
        });
    };

    const validate = (name, value) => {
        if (value.trim() === '') {
            setErrors((prevErrors) => ({ ...prevErrors, [name]: 'This field is required' }));
        } else {
            setErrors((prevErrors) => ({ ...prevErrors, [name]: '' }));
        }
    };

    const handleSubmit = (event, callback) => {
        event.preventDefault();
        if (Object.values(errors).every((err) => err === '')) {
            callback(values);
        }
    };

    return { values, handleChange, handleSubmit, validate, errors };
}

const Component = () => {
    const { values, errors, handleChange, handleSubmit } = useForm({ username: '', password: '' }, validate);

    const submit = () => {
        alert('Form submitted successfully');
    };

    return (
        <form onSubmit={(e) => handleSubmit(e, submit)}>
            <div>
                <label>Username</label>
                <input type='text' name='username' value={values.username} onChange={handleChange} />
                {errors.username && <p>{errors.username}</p>}
            </div>
            <button type='submit'>Submit</button>
        </form>
    );
};

3. Authentification

Gérer l'état d'authentification des utilisateurs, y compris la connexion, la déconnexion et la vérification si un utilisateur est authentifié.

import { useState, useEffect } from 'react';

function useAuth() {
    const [user, setUser] = useState(null);

    useEffect(() => {
        const loggedUser = localStorage.getItem('user');
        if (loggedUser) {
            setUser(JSON.parse(loggedUser));
        }
    }, []);

    const login = (userData) => {
        setUser(userData);
        // call login api here
        localStorage.setItem('user', JSON.stringify(userData));
    };

    const logout = () => {
        setUser(null);
        localStorage.removeItem('user');
    };

    return { user, login, logout };
}

4. Taille de la fenêtre

Un hook personnalisé pour suivre les changements de taille de fenêtre, ce qui peut être utile pour une conception réactive.

import { useState, useEffect } from 'react';

function useWindowSize() {
    const [size, setSize] = useState({
        width: window.innerWidth,
        height: window.innerHeight
    });

    useEffect(() => {
        const handleResize = () => {
            setSize({
                width: window.innerWidth,
                height: window.innerHeight
            });
        };

        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return size;
}

5. Entrée anti-rebond

Un hook personnalisé pour anti-rebond des modifications d'entrée, ce qui est utile pour les entrées de recherche ou d'autres scénarios dans lesquels vous souhaitez retarder un appel de fonction.

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
    const [debouncedValue, setDebouncedValue] = useState(value);

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);

        return () => {
            clearTimeout(handler);
        };
    }, [value, delay]);

    return debouncedValue;
}

Conclusion

Les hooks personnalisés peuvent grandement simplifier votre code React en le rendant plus réutilisable et maintenable. En adhérant aux meilleures pratiques, comme éviter les effets secondaires directement à l'intérieur des hooks et en vous assurant de ne pas muter directement des tableaux ou des objets, vous pouvez créer des hooks prévisibles et faciles à tester.

Si vous avez trouvé cet article utile, pensez à l'aimer et à le partager. Si vous avez un avis ou d'autres suggestions sur les crochets personnalisés, n'hésitez pas à le poster dans les commentaires.

Merci, bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript less Array Object if for Error using Conditional function this display input table https

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JAVASCRIPT : FUNC APPELLE FUNKArticle suivant：JAVASCRIPT : FUNC APPELLE FUNK

Articles Liés

Voir plus