Render props with async components

A component receives its children as written, like in React: one child is passed as it is, several children as an array, and without children there is no children prop at all. So a single function child works as a render prop: the component loads the data, and the caller decides how it looks.

The same <Jokes> loader is used twice below with different markup. Reload for new jokes.

As a list

As cards

Joke #1
How many optometrists does it take to change a light bulb? - 1 or 2? 1... or 2?
Joke #2
Where does Napoleon keep his armies? - In his sleevies.