Les Custom Hook 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.

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 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 :