Frontend Academy · Leçon

Render Props et schémas HOC

Render Props et schémas HOC est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Deux grands modèles classiques de réutilisation

Avant les hooks (React 16.8), réutiliser une logique avec état signifiait utiliser soit des composants d’ordre supérieur (HOC), soit des propriétés de rendu. Ils sont rares dans le nouveau code, mais vous les rencontrerez encore dans les bases de code existantes et dans de nombreuses bibliothèques.

Propriétés de rendu — l’idée

Un composant accepte une fonction comme propriété (généralement nommée render ou children) et l’appelle avec son état interne. L’utilisateur du composant décide du rendu à produire avec cet état.

function Mouse({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);
  return render(pos);
}

// Usage:
<Mouse render={({ x, y }) => <p>{x}, {y}</p>} />

children comme fonction

La propriété children peut également être une fonction : c’est le même modèle, avec un JSX plus clair.

function Mouse({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  /* ... */
  return children(pos);
}

<Mouse>
  {({ x, y }) => <p>{x}, {y}</p>}
</Mouse>

Composants d’ordre supérieur — l’idée

Un HOC est une fonction qui reçoit un composant et renvoie un nouveau composant doté de propriétés ou d’un comportement supplémentaires. Ce modèle a été largement utilisé dans connect() de Redux et withRouter() de React Router.

function withMouse(Component) {
  return function WithMouse(props) {
    const [pos, setPos] = useState({ x: 0, y: 0 });
    useEffect(() => {
      const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
      window.addEventListener('mousemove', handler);
      return () => window.removeEventListener('mousemove', handler);
    }, []);
    return <Component {...props} mouse={pos} />;
  };
}

// Usage:
const Position = ({ mouse }) => <p>{mouse.x}, {mouse.y}</p>;
const EnhancedPosition = withMouse(Position);
<EnhancedPosition />

Les HOC se composent par enveloppement

Vous pouvez empiler les HOC, mais vous obtenez un « enfer des enveloppes » difficile à déboguer.

// Multiple HOCs:
const Enhanced = withRouter(connect(mapState)(withTranslation()(MyComponent)));
// Equivalent in modern React:
// const Enhanced = MyComponent (reads from hooks: useRouter, useSelector, useTranslation)

Propriétés de rendu ou HOC

Propriétés de rendu : plus explicites, adaptées au typage et sans collisions de noms. HOC : plus déclaratifs, ils font perdre les types statiques des composants enveloppés si vous ne prenez pas de précautions, et des collisions de noms de propriétés sont possibles.

Pourquoi les hooks ont remplacé les deux

Les hooks personnalisés atteignent le même objectif avec moins de cérémonial : pas de composants enveloppes, pas d’arguments de fonction imbriqués et pas de gymnastique de typage. En 2025, les hooks sont la réponse idiomatique.

// Custom hook equivalent of useMouse:
function useMouse() {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);
  return pos;
}

// Usage:
const { x, y } = useMouse();

Quand les propriétés de rendu restent préférables

Pour les composants qui doivent injecter du balisage (et pas seulement de l’état), par exemple les listes virtualisées qui effectuent le rendu des éléments à des positions précises, les propriétés de rendu restent le choix naturel.

function VirtualList({ items, itemHeight, renderItem }) {
  const [scrollTop, setScrollTop] = useState(0);
  const start = Math.floor(scrollTop / itemHeight);
  const visible = items.slice(start, start + 20);
  return visible.map((item, i) => renderItem(item, start + i));
}

<VirtualList items={data} itemHeight={40} renderItem={(item, i) => (
  <Row key={i} data={item} />
)} />

Bonnes pratiques pour les HOC (si nécessaire)

Si vous devez écrire un HOC : copiez les méthodes statiques (hoist-non-react-statics), transmettez les références (React.forwardRef) et conservez le displayName pour DevTools.

Transmettre les références dans les HOC

Par défaut, les HOC masquent les références. Utilisez forwardRef afin que les utilisateurs puissent toujours accéder à la référence du composant sous-jacent.

function withLogger(Component) {
  const Wrapped = React.forwardRef((props, ref) => {
    console.log('rendering', Component.name);
    return <Component {...props} ref={ref} />;
  });
  Wrapped.displayName = `withLogger(${Component.name})`;
  return Wrapped;
}

Reconnaître les modèles existants

Vous rencontrerez les HOC et les propriétés de rendu dans react-redux (ancienne API), Apollo Client v2, react-router v5 (withRouter), Formik (Field) et styled-components (withTheme). Refactorez-les avec des hooks lorsque les nouvelles API de ces bibliothèques le permettent.

Vérification rapide

Quel modèle les hooks ont-ils largement remplacé pour partager une logique avec état entre des composants React ?

Récapitulatif : propriétés de rendu et HOC

Propriétés de rendu : fonction passée en propriété et renvoyant du JSX, explicite et adaptée au typage. HOC : fonction qui enveloppe un composant, utilisée par les anciennes bibliothèques (connect, withRouter). Les hooks personnalisés ont remplacé les deux pour la logique d’état. Les propriétés de rendu restent préférables lorsque vous devez injecter un balisage personnalisé (listes virtualisées). Lorsque vous écrivez des HOC : utilisez forwardRef, hoist-non-react-statics et définissez displayName.

Questions Fréquemment Posées

La leçon « Render Props et schémas HOC » est-elle gratuite ?

Oui — le texte complet de « Render Props et schémas HOC » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Render Props et schémas HOC » ?

Transmettez une fonction de rendu comme propriété pour injecter l’interface utilisateur, puis encapsulez les composants dans des composants d’ordre supérieur pour injecter un comportement sans modifi… Tu pratiques Frontend 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 Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend 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 2 sur 4.

Combien de temps prend la leçon « Render Props et schémas HOC » ?

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 Frontend Academy ?

Oui. Chaque leçon Frontend 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

Composants composés avec Context
Render Props et schémas HOC
Portails pour les modales et les infobulles
Frontières d’erreur

← Retour à Frontend Academy