Charles Peters UI Engineer

Function as Child

January 15, 2018

In a typical React Component, you would render a child as another React Element.

<Parent><Children /></Parent>

In the "child as function" paradigm, instead of returning an element below, we're using the Toggle component to have encapsulated state that's common to multiple components. Since this logic is repeated we can abstract it into its own class and call individual instances of it.

So in our Toggle component, we're returning a function to be the only child, and passing in the state and a handler to that function. Then when we call an instance of it like in the Accordion or the Thumbnail, the state is encapsulated to this instance. This leaves the child component to be a stateless pure piece of UI, not knowing how it gets opened, only that it can be opened or closed.

Also this pattern gets called "Render Props", where instead of mapping the function to the children prop, it's mapped to a prop called render and called inside the JSX itself versus as a child. Render Props seems to be more of the conventional name for this pattern and now has official documentation, but the idea remains the same.

Why?

You might be wondering: this doesn't seem much better than just passing down state to a component or moving this into my store's reducer, so why should I bother? And I would counter: that was an obnoxiously specific question to ask of a blog post, let me see if I can give a simple response.

Our <Toggle /> component is a really simple example and I'll demonstrate more in a moment, but it outlines a piece of UI logic that you only need to write one. Simplifying this logic allows you to compose with this idea versus reproducing it. There are loads and loads of UI components that need to be toggled: checkboxes, modals, accordions, dropdown menus. But all those are in reach by calling a new instance of <Toggle />.

React gets simpler when you stop adding things to it (ref: "In the Mouth of the Beast"). Using "Just Components" can get you pretty far in a codebase without a lot of effort. In my experience, these patterns make on-boarding developers to a project more streamlined, since everything is being composed of declarative components (think pure functions). The verbosity is easier to take in and keep everyone on the same page. Beyond just that, it's in a parlance that people who already use React understand: Components.

Using the Pattern

Below we're using rendering a list of results from a fetch call. We're using a function as child component simply to set the state of network call and as a child of that instance, calling our list.

Downshift is one of those amazingly extensible components that you'd think is necessary to use some state management solution or require a lot of setup. I won't bother with an example snippet, because it's seriously worth it to go read those docs. Here's a demo of building a simple autocomplete.

What react-motion does is it allows you to be able to interpolate style and puts the updating value through an animation within scope. I could be wrong, but I think this might be the original "Function as Child" component.