React Academy · Les

Het Render Props-patroon

Geef een functie door als prop die JSX retourneert, zodat u gedrag kunt delen zonder de UI te koppelen.

Les 1 van 413 stappen

Het Render Props-patroon is een gratis React Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Academy bevat in totaal 4 lessen.

Welkom

In deze les leer je het renderpropspatroon begrijpen — een functie als prop doorgeven die JSX retourneert — en ontdek je wanneer dit nuttig is om gedrag tussen componenten te delen.

Wat zijn render props?

Render props zijn een patroon waarbij een component een prop accepteert die een functie is. De component roept deze functie aan om de gerenderde uitvoer te produceren. De gebruiker bepaalt de gebruikersinterface; de component levert het gedrag.

<DataProvider render={data => <UserCard user={data} />} />

Eenvoudig voorbeeld van een render prop

Een Toggle-component beheert de status open/gesloten en roept een render prop aan met de huidige status en een togglefunctie. De gebruiker bepaalt hoe de component wordt weergegeven.

function Toggle({ render }) {
  const [on, setOn] = useState(false);
  return render(on, () => setOn(!on));
}

<Toggle render={(on, toggle) => (
  <button onClick={toggle}>{on ? 'Close' : 'Open'}</button>
)} />

children gebruiken als render prop

In plaats van een benoemde render prop kun je `children` als functie gebruiken. Veel bibliotheken (React Router v5, Formik) gebruiken dit patroon — het wordt soms 'children as a function' genoemd.

<Toggle>
  {(on, toggle) => (
    <div>
      {on && <Panel />}
      <button onClick={toggle}>Toggle</button>
    </div>
  )}
</Toggle>

Muispositietracker

Een klassiek voorbeeld van render props: een MouseTracker-component houdt de cursorpositie bij en geeft die door aan een render prop. Elke gebruiker kan de positie weergeven zoals die wil.

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

Render props versus aangepaste hooks

Render props waren het standaardpatroon voordat hooks bestonden. Aangepaste hooks doen nu hetzelfde op een overzichtelijkere manier: de hook retourneert gegevens en functies; de component gebruikt die in zijn eigen JSX. Hooks hebben de voorkeur in modern React.

// Old: render props
<Mouse render={pos => <p>{pos.x}</p>} />

// Modern: custom hook
const pos = useMouse();
<p>{pos.x}</p>

Wanneer render props nog steeds zinvol zijn

Render props zijn nog steeds nuttig wanneer: (1) je dynamische weergave op een specifieke locatie in de boomstructuur moet invoegen, (2) je een headless componentbibliotheek bouwt die logica en gebruikersinterface van elkaar scheidt.

Waarschuwing voor prestaties

Als je een render prop inline definieert, ontstaat er bij elke weergave van de bovenliggende component een nieuwe functie. Daardoor kunnen onderliggende PureComponent- of React.memo-componenten niet vroegtijdig stoppen met renderen. Haal renderpropfuncties naar een stabiele variabele of methode.

// Avoid: new function every render
<Toggle render={pos => <Dot pos={pos} />} />

// Better: stable reference
const renderDot = pos => <Dot pos={pos} />;
<Toggle render={renderDot} />

Render props samenstellen

Het nesten van meerdere componenten met render props leidt al snel tot 'render-prophel' of 'wrapperhel' — diep geneste callbacks die moeilijk te lezen zijn. Dit is een van de redenen waarom hooks zijn geïntroduceerd.

Render props in bibliotheken

React Router v5 gebruikte render props voor Route. Downshift, Formik en React-Table gebruiken ook varianten hiervan. Als je render props begrijpt, kun je code die deze bibliotheken gebruikt beter lezen en debuggen.

Korte controle

Wat is het belangrijkste voordeel van het renderpropspatroon ten opzichte van het doorgeven van statische JSX?

Beantwoord dit in de interactieve les

Samenvatting

Render props geven een functie door die JSX retourneert. De component levert het gedrag; de gebruiker levert de gebruikersinterface. Geef in modern React de voorkeur aan aangepaste hooks, maar begrijp render props zodat je bestaande code kunt lezen en headless componenten kunt bouwen.

Hierna

Volgende les: **Higher-Order Components (HOCs) Explained** — je leert componenten omhullen om props toe te voegen, routes te beveiligen of logboekregistratie toe te voegen.

Gratis beginnen

Leer React met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 88
Lessen: 324

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Het Render Props-patroon” gratis?

Ja — de volledige tekst van “Het Render Props-patroon” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus React Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus React Academy bevat in totaal 4 lessen.

Wat leer ik in “Het Render Props-patroon”?

Geef een functie door als prop die JSX retourneert, zodat u gedrag kunt delen zonder de UI te koppelen. Je oefent met React Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met React Academy te beginnen?

Ervaring vooraf is niet nodig. React Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Het Render Props-patroon”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over React Academy?

Ja. Elke les over React Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Het Render Props-patroon
Higher-Order Components (HOC's) uitgelegd
HOC versus Render Props versus Custom Hooks
Een HOC refactoren naar een Custom Hook

← Terug naar React Academy