Render Props

React 🟡 Mid

Définition

Pattern ou un composant reçoit une fonction en prop qui retourne du JSX, permettant de partager de la logique tout en laissant le contrôle du rendu a l'appelant.

Analogie

Comme un cours de peinture 'apporte ta toile' : le professeur (composant) guide, mais tu décides du résultat.

Exemple de code

function MouseTracker({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })}>
      {render(pos)}
    </div>
  );
}
<MouseTracker render={({ x, y }) => <p>{x}, {y}</p>} />

Cas d'usage

Partager de la logique réutilisable entre composants (souvent remplace par les custom hooks aujourd'hui).

Anti-pattern

Imbriquer plusieurs render props créant un 'callback hell' illisible.

Termes liés

#patterns#interview

En entretien

Explique-moi le pattern Render Props.
Un composant reçoit une fonction en prop qui retourne du JSX, ce qui permet de partager de la logique tout en laissant le contrôle du rendu à l'appelant, comme un cours de peinture 'apporte ta toile' où le prof guide mais tu décides du résultat. MouseTracker par exemple partage la position de la souris via render({x, y}).
Ce pattern est-il encore très utilisé aujourd'hui ?
Il est aujourd'hui souvent remplacé par les custom hooks pour partager de la logique réutilisable entre composants. Le piège classique reste d'imbriquer plusieurs render props, créant un 'callback hell' illisible.

Fiche mise à jour le 2026-09-27