Les Custom Hook en React et React Native

Utilisation Optimale des Custom Hooks en React et React Native

Bonjour à tous les passionnés du développement ! Avez-vous déjà été confrontés à des logiques métier encombrantes dans vos composants React ou React Native? Ou vous êtes-vous déjà demandé s’il y avait un moyen plus efficace de réutiliser certaines logiques métier sans réinventer la roue? Si c’est le cas, cet article va vous éclairer sur les Custom Hooks.

Qu’est-ce que les Custom Hooks ?

Les Custom Hooks sont une solution innovante pour encapsuler et réutiliser efficacement des logiques métier dans nos composants. Ce ne sont pas des éléments intrinsèques de React, mais des fonctions que nous définissons pour centraliser des logiques courantes, tout en exploitant les avantages des Hooks natifs tels que useState et useEffect.

Quand et comment les implémenter ?

Quand est-il judicieux d’introduire un Custom Hook ? Idéalement, chaque fois qu’une logique spécifique est susceptible d’être réutilisée à travers plusieurs composants ou si cette logique rend le composant peu lisible.

Pour illustrer, considérez une application avec différents niveaux d’abonnements : Free, Pro et Premium. Un Custom Hook nommé useUserRights pourrait être développé pour fournir des informations sur le niveau d'adhésion de l'utilisateur, l'accès à un article ou encore l'accès au chat. C'est le genre de logique qui pourrait être appelée à plusieurs endroits.

Ici, par exemple, sans utiliser de Custom Hook pour vérifier certains droits utilisateurs afin de modifier l’affichage in-app, nous ferions quelque chose comme :

const hasChatAccess = userPlan.isPaid && userPlan.hasPremiumSectionAccess && !userPlan.isExpired

Et à chaque fois que l’on veut faire une vérification, on va réécrire la même logique en la modifiant un peu à chaque fois… ou pas ! Alors qu’avec un Custom Hook, on applique cette logique et toutes celles associées une seule fois, et c’est tout.

// One custom hook
const useAuthorization = useMemo((newSub) => {
    if (!id) {
        return defaultAuthrorization;
    }
    const {subIsModified} = useSelector(/*some redux state here for exemple*/);

    const newAuthorization = {...defaultAuthrorization};

    if (subIsModified && subIsModified === "premium") {
        newAuthorization.paid = true;
        newAuthorization.hasChatAccess = true;
        newAuthorization.hasPremiumSectionAccess = true;
        // etc...
    }
    return newAuthorization

}, [subIsModified])

// How to use it
const {hasChatAccess} = useAuthorization()

L’adoption des Custom Hooks permet de :

1. Éviter la duplication du code et des logiques métiers. Cela permet d’être plus agile en développement, de bénéficier d’un code plus structuré, et surtout de simplifier la maintenance. En effet, toute modification n’aurait à être effectuée qu’une seule fois.
2. Améliorer la lisibilité et la modularité. Un composant qui respecte le principe de responsabilité unique est souvent plus simple à comprendre et à tester.
3. Faciliter la réutilisation entre React et React Native. En développant une application multi-plateforme, certains Custom Hooks peuvent être communs, garantissant ainsi la cohérence et la mutualisation du code.

Pourquoi opter pour les Custom Hooks ?

Leur avantage majeur réside dans la centralisation et l’optimisation du code. Les Custom Hooks renforcent la cohérence, minimisent les redondances et simplifient la maintenance. Par essence, ils contribuent à une architecture plus propre et robuste.

Conclusion

Les Custom Hooks constituent un atout indéniable dans l’écosystème React et React Native. Ils offrent une flexibilité et une optimisation qui renforcent la qualité et l’efficacité du code. Si vous n’avez pas encore intégré cette pratique, je vous encourage vivement à explorer cette voie.