React Academy · Leçon

HOC, propriétés de rendu ou hooks personnalisés

Comparez ces trois stratégies de partage de code selon la lisibilité, les tests et la composition.

HOC, propriétés de rendu ou hooks personnalisés est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous comparerez les HOC, les propriétés de rendu et les crochets personnalisés selon leur lisibilité, leur testabilité, leur composabilité et les situations dans lesquelles chacun constitue le bon outil.

Le problème que les trois modèles résolvent

Ces trois modèles servent à partager un état ou un comportement entre plusieurs composants, sans copier-coller de code.

HOC : avantages

Les HOC fonctionnent avec les composants de classe (avant l’arrivée des crochets), s’intègrent parfaitement aux bibliothèques qui ne prennent pas en charge les crochets et peuvent être appliqués de manière transparente sans modifier le code source du composant enveloppé.

HOC : inconvénients

Les HOC créent un enfer des enveloppes dans DevTools, peuvent provoquer des collisions de propriétés si deux HOC injectent une propriété portant le même nom et sont plus difficiles à typer correctement dans TypeScript. Les références doivent être transmises explicitement.

Propriétés de rendu : avantages

Les propriétés de rendu rendent le flux de données explicite : vous voyez exactement quelles valeurs le fournisseur de comportement expose. Elles fonctionnent avec les composants de classe comme avec les composants fonctionnels et sont idéales pour les API de composants sans interface.

Propriétés de rendu : inconvénients

Les fonctions de rappel imbriquées des propriétés de rendu créent un « enfer des fonctions de rappel ». Les fonctions de propriété de rendu définies directement empêchent la mémorisation. Elles ajoutent du bruit visuel par rapport à un simple appel de crochet.

Crochets personnalisés : avantages

Les crochets personnalisés sont les plus composables : vous pouvez en appeler plusieurs, les combiner et conserver un JSX propre dans le composant. Ils sont faciles à tester isolément. Les types TypeScript sont simples à définir.

const { on, toggle } = useToggle();
const { x, y } = useMouse();
// No wrapper components, no callback nesting

Crochets personnalisés : inconvénients

Les crochets personnalisés ne fonctionnent qu’avec les composants fonctionnels (et non avec les composants de classe). Ils ne peuvent pas injecter de JSX : ils renvoient uniquement des données et des fonctions. Certains cas d’utilisation (comme les protections d’authentification qui redirigent) nécessitent des HOC ou des composants enveloppes.

Guide de décision

Vous devez rediriger ou protéger une route ? Utilisez un HOC ou un composant enveloppe. Vous créez une bibliothèque d’interface utilisateur sans interface ? Utilisez des propriétés de rendu ou des crochets. Vous partagez une logique avec état dans des composants fonctionnels ? Utilisez un crochet personnalisé. Vous enveloppez un composant de classe ou une intégration tierce ? Utilisez un HOC.

Choix moderne par défaut : les crochets d’abord

Dans une base de code React moderne (composée uniquement de composants fonctionnels), les crochets personnalisés constituent le choix par défaut. N’utilisez les HOC ou les propriétés de rendu que lorsque les crochets ne permettent pas de résoudre le problème.

Vérification rapide

Quel modèle de partage de code est recommandé par défaut pour extraire une logique avec état des composants fonctionnels de React moderne ?

Récapitulatif

Les HOC, les propriétés de rendu et les crochets personnalisés partagent tous de la logique. Les crochets sont le choix moderne par défaut : propres, composables et testables. Les HOC servent aux composants de classe et aux protections de routes. Les propriétés de rendu servent aux interfaces utilisateur sans interface. Choisissez selon le contexte.

Suite

Leçon suivante : **Refactoriser un HOC en crochet personnalisé** — vous convertirez progressivement un HOC withAuth en crochet useAuth.

Questions Fréquemment Posées

La leçon « HOC, propriétés de rendu ou hooks personnalisés » est-elle gratuite ?

Oui — le texte complet de « HOC, propriétés de rendu ou hooks personnalisés » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « HOC, propriétés de rendu ou hooks personnalisés » ?

Comparez ces trois stratégies de partage de code selon la lisibilité, les tests et la composition. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « HOC, propriétés de rendu ou hooks personnalisés » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Modèle des propriétés de rendu
Composants d’ordre supérieur (HOC) expliqués
HOC, propriétés de rendu ou hooks personnalisés
Refactoriser un HOC en hook personnalisé

← Retour à React Academy