Render Props

Definition

Pattern ou un composant recoit une fonction en prop qui retourne du JSX, permettant de partager de la logique tout en laissant le controle du rendu a l'appelant.

Analogie

Comme un cours de peinture 'apporte ta toile' : le professeur (composant) guide, mais tu decides du resultat.

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 reutilisable entre composants (souvent remplace par les custom hooks aujourd'hui).

Anti-pattern

Termes lies