Comparez les motifs de composition : render props, HOCs et custom hooks

Question

Accepted Answer

Les trois partagent la logique entre les composants, mais ils ont évolué au fil du temps et **les custom hooks sont l'approche moderne par défaut** pour partager la *logique*. ## Composant d'ordre supérieur (HOC) Une fonction qui prend un composant et retourne un composant amélioré : ```jsx const withAuth = Component => props => { const user = useUser(); return user ? : ; }; const ProtectedPage = withAuth(Page); ``` Inconvénients : **imbrication de wrappers** ("wrapper hell" dans l'arborescence), collisions de noms de props et il n'est pas clair d'où proviennent les props injectées. ## Render props Un composant prend une fonction comme enfant pour partager l'état : ```jsx {({ x, y }) => } ``` Flexible, mais l'imbrication de plusieurs composants render-prop crée une "pyramide de rappels". ## Custom hooks (préféré) Extrayez la logique d'état dans une fonction `useX` — **pas d'imbrication d'arborescence supplémentaire, flux de données explicite** : ```jsx function useMouse() { const [pos, setPos] = useState({ x: 0, y: 0 }); useEffect(() => { /* attach listener, cleanup */ }, []); return pos; } function Component() { const { x, y } = useMouse(); // clear, flat, composable } ``` ## Pourquoi c'est important - **Partage de logique** → custom hooks (la réponse moderne). - **Partage/structuration d'UI** → **composition** simple (passage de `children`/composants). - **HOCs / render props** restent utiles lors de l'intégration de bibliothèques plus anciennes ou quand vous devez envelopper le rendu lui-même (par ex. certaines bibliothèques d'animation). Ce ne sont pas des erreurs — juste remplacées par les hooks pour la plupart des réutilisations de logique.