Design Patterns · Junior · Question 51 of 75

What is the render props pattern?

<MouseTracker render={({ x, y }) => <Cursor x={x} y={y} />} />

✓Correct answer: A component receives a function prop and calls it to decide what to render, sharing its logic with the caller
2A component that renders only props without state
3A way to pass CSS through props

Explanation

Custom hooks replaced most render props, but the pattern is still used where a component must control rendering, e.g. virtualized lists.

Further reading

patterns.dev: Render Props Pattern ↗

Test yourself

Take the Design Patterns · Junior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.