React Hooks: Compound Components

A few weeks ago I did a DevTips with Kent livestream
where I show you how to refactor the compound components pattern from a class
component to a function component with React hooks:

If you’re unfamiliar with compound components, then you probably haven’t watched
my Advanced React Component Patterns course
on egghead.io or
on Frontend Masters.

The idea is that you have two or more components that work together to
accomplish a useful task. Typically one component is the parent, and the other
is the child. The objective is to provide a more expressive and flexible API.

Think of it like <select> and <option>:

<select>
  <option value="value1">key1</option>
  <option value="value2">key2</option>
  <option value="value3">key3</option>
</select>

If you were to try and use one without the other it wouldn’t work (or make
sense). Additionally it’s actually a really great API. Let’s check out what it
would look like if we didn’t have a compound components API to work with
(remember, this is HTML, not JSX):

<select options="key1:value1;key2:value2;key3:value3"></select>

I’m sure you can think of other ways to express this, but yuck. And how would
you express the disabled attribute with this kind of API? It’s kinda madness.

So the compound components API gives you a nice way to express relationships
between components.

Another important aspect of this is the concept of “implicit state.” The
<select> element implicitly stores state about the selected option and shares
that with it’s children so they know how to render themselves based on that
state. But that state sharing is implicit because there’s nothing in our HTML
code that can even access the state (and it doesn’t need to anyway).

Alright, let’s get a look at a legit React component that exposes a compound
component to understand these principles further. Here’s an example of
the <Menu /> component from Reach UI that
exposes a compound components API:

function App() {
  return (
    <Menu>
      <MenuButton>
        Actions <span aria-hidden>▾</span>
      </MenuButton>
      <MenuList>
        <MenuItem onSelect={() => alert('Download')}>Download</MenuItem>
        <MenuItem onSelect={() => alert('Copy')}>Create a Copy</MenuItem>
        <MenuItem onSelect={() => alert('Delete')}>Delete</MenuItem>
      </MenuList>
    </Menu>
  )
}

In this example, the <Menu> establishes some shared implicit state. The
<MenuButton>, <MenuList>, and <MenuItem> components each access and/or
manipulate that state, and it’s all done implicitly. This allows you to have the
expressive API you’re looking for.

So how is this done? Well, if you watch
my course I show you two ways to do it. One
with React.cloneElement on the children and the other with React context. (My
course will need to be slightly updated to show how to do this with hooks). In
this blog post, I’ll show you how to create a simple set of compound components
using context.

When teaching a new concept, I prefer to use simple examples at first. So we’ll
use my favorite <Toggle> component example for this.

Here’s how our <Toggle> compound components are going to be used:

function App() {
  return (
    <Toggle onToggle={on => console.log(on)}>
      <ToggleOn>The button is on</ToggleOn>
      <ToggleOff>The button is off</ToggleOff>
      <ToggleButton />
    </Toggle>
  )
}

Ok, the moment you’ve all been waiting for, the actual full implementation of
compound components with context and hooks:

import * as React from 'react'
// this switch implements a checkbox input and is not relevant for this example
import {Switch} from '../switch'

const ToggleContext = React.createContext()

function useEffectAfterMount(cb, dependencies) {
  const justMounted = React.useRef(true)
  React.useEffect(() => {
    if (!justMounted.current) {
      return cb()
    }
    justMounted.current = false
  }, dependencies)
}

function Toggle(props) {
  const [on, setOn] = React.useState(false)
  const toggle = React.useCallback(() => setOn(oldOn => !oldOn), [])
  useEffectAfterMount(() => {
    props.onToggle(on)
  }, [on])
  const value = React.useMemo(() => ({on, toggle}), [on])
  return (
    <ToggleContext.Provider value={value}>
      {props.children}
    </ToggleContext.Provider>
  )
}

function useToggleContext() {
  const context = React.useContext(ToggleContext)
  if (!context) {
    throw new Error(
      `Toggle compound components cannot be rendered outside the Toggle component`,
    )
  }
  return context
}

function ToggleOn({children}) {
  const {on} = useToggleContext()
  return on ? children : null
}

function ToggleOff({children}) {
  const {on} = useToggleContext()
  return on ? null : children
}

function ToggleButton(props) {
  const {on, toggle} = useToggleContext()
  return <Switch on={on} onClick={toggle} {...props} />
}

Here’s this component in action:

So the way this works is we create a context with React where we store the state
and a mechanism for updating the state. Then the <Toggle> component is
responsible for providing that context value to the rest of the react tree.

I’ll walkthrough this implementation and explain the particulars in a future
update to my Advanced React Component Patterns course. So keep an eye out for
that!

I hope that helps you get some ideas of ways you can make your component APIs
more expressive and useful. Good luck!

Read also on my blog: “Inversion of Control”