Removing JSX from components, a couple confusing patterns become clearer.

If you didn’t already hate JSX for it’s uses of className and htmlFor over class and html, you hopped on the hate-train with render props.

WTF is a render prop?

The render prop pattern is the delegation pattern, branded for React. It extends a component’s children to take a function — which it calls back with data.

In use, render props look like this:

<WindowWidth>{width => <div>{width}<div>}</WindowWidth>

That looks nothing like the HTML-like syntax I was promised! So let’s check it out without JSX:

createElement(WindowWidth, null, width => <div>{width}</div>)

With JS removed, this is clearly a box-standard callback.

Where did all the render props go?

For the most part, render props have been replaced by Hooks. However, they live on in legacy codebases, the Context.Consumer API, and in listing components (which we’ll cover next).

Take it home

This CodeSandbox uses a JSX render prop to fetch a Pokemon. Take a moment and remove the JSX. Which do you find more scrutable and why?