Partage de logique non visuelle

Distinguer logique visuelle et non visuelle

Dans un composant React, on peut distinguer deux types principaux de logique :

• Logique Visuelle (ou de Rendu) : Concerne directement ce qui est affiché à l'écran. Cela inclut la structure JSX retournée, le rendu conditionnel basé sur les props ou l'état, le mapping de listes en éléments JSX, et l'application de styles ou de classes CSS. Le partage de logique visuelle se fait principalement en créant des composants réutilisables (par exemple, un composant ``, ``, ``).
• Logique Non Visuelle (ou Stateful/Effectful) : Concerne tout ce que fait le composant en dehors du simple calcul du JSX. Cela inclut la gestion de l'état interne (useState, useReducer), l'exécution d'effets de bord (useEffect pour les appels API, les abonnements, les timers), l'accès au contexte (useContext), la création de références (useRef), et la mémorisation de calculs ou de fonctions (useMemo, useCallback).

Le défi que les Hooks personnalisés viennent résoudre est le partage efficace de cette seconde catégorie : la logique non visuelle.

Pourquoi partager la logique non visuelle ?

Comme souligné dans la motivation des Hooks personnalisés, la logique non visuelle est souvent répétitive. De nombreux composants peuvent avoir besoin d'interagir avec le localStorage, de suivre le statut de connexion, de gérer un état de formulaire similaire, ou de récupérer des données de manière analogue. Sans mécanisme de partage, cette logique serait dupliquée.

Les Hooks personnalisés fournissent ce mécanisme. Ils permettent d'extraire cette logique stateful et/ou effectful (qui utilise l'état et/ou les effets) hors des composants individuels et de l'encapsuler dans une fonction réutilisable. Les composants peuvent alors consommer cette logique complexe en appelant simplement le Hook personnalisé, sans se soucier des détails de son implémentation interne.

Comment les Hooks personnalisés facilitent ce partage

Les Hooks personnalisés sont parfaitement adaptés au partage de logique non visuelle pour plusieurs raisons :

• Encapsulation : Ils regroupent un ensemble cohérent de hooks (useState, useEffect, etc.) et la logique associée derrière une interface claire (la fonction du hook personnalisé et sa valeur de retour).
• Réutilisabilité : Etant de simples fonctions JavaScript (avec la convention `use...`), ils peuvent être importés et utilisés dans n'importe quel composant fonctionnel ou autre hook personnalisé.
• Isolation de l'état : Chaque appel au hook personnalisé crée une instance indépendante de l'état et des effets. Deux composants utilisant le même useCounter auront chacun leur propre compteur. Cela évite les effets de bord indésirables entre les différentes utilisations du hook.
• Composition : Les Hooks personnalisés peuvent eux-mêmes utiliser d'autres Hooks personnalisés, permettant de construire des abstractions complexes en composant des briques de logique plus simples.
• Séparation des préoccupations : Ils aident à séparer la logique stateful/effectful de la logique de rendu du composant. Les composants deviennent plus simples, plus lisibles et se concentrent sur l'affichage, tandis que la logique complexe est gérée par le hook.

Exemples de logique non visuelle partagée

Les exemples précédents illustrent bien ce partage :

• useFetch partage toute la logique liée à une requête réseau asynchrone : gestion de l'état de chargement, stockage des données, gestion des erreurs, annulation de la requête. C'est purement logique, sans aucun aspect visuel.
• useLocalStorage partage la logique de lecture/écriture dans le localStorage et sa synchronisation avec un état React.
• useToggle partage la logique simple mais répétitive de gestion d'un état booléen et de sa fonction d'inversion.
• useFormInput partage la logique de base pour lier un état à un champ de formulaire contrôlé.

Dans tous ces cas, le Hook personnalisé fournit une fonctionnalité (une logique non visuelle) sans dicter comment l'information retournée doit être affichée. C'est le composant qui utilise le hook qui décide comment intégrer l'état ou déclencher les fonctions retournées dans son propre rendu JSX.

Conclusion : La bonne abstraction pour la logique stateful

Les Hooks personnalisés sont le mécanisme idiomatique et puissant de React pour partager la logique non visuelle, en particulier celle qui implique l'état (stateful) et les effets de bord (effectful). Ils permettent d'éviter la duplication de code, d'améliorer la séparation des préoccupations, de faciliter les tests et d'augmenter la maintenabilité globale de l'application.

Lorsque vous identifiez une logique d'état ou d'effet répétée dans vos composants, la création d'un Hook personnalisé devrait être votre réflexe principal pour factoriser et partager cette logique de manière propre et réutilisable, tout en laissant aux composants la responsabilité de la partie visuelle.