component-boundary

Use hooks anywhere in your render tree by wrapping your elements in a boundary function.

See the example below for some use cases where this might be helpful:

1import * as React from "react";
2import boundary from "@lewisl9029/component-boundary";
3
4const Example = ({ colors }) => {
5  const [isOpen, setIsOpen] = React.useState(false);
6
7  return (
8    <div>
9      {isOpen
10        ? // Ever wanted to to call a hook within a branching path?
11          boundary(() => (
12            <Modal
13              close={React.useCallback(() => setIsOpen(false), [setIsOpen])}
14            >
15              <ul>
16                {colors.map((color) =>
17                  // Or within a mapping function?
18                  boundary(() => (
19                    <li style={useMemo(() => ({ color }), [color])}>{color}</li>
20                  ))
21                )}
22              </ul>
23            </Modal>
24          ))
25        : null}
26    </div>
27  );
28};

Motivation

By now I'm sure we're all deeply familiar with the infamous Rules of Hooks:

Don’t call Hooks inside loops, conditions, or nested functions.

https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

Often, to adhere to these rules, we end up adding extra layers of indirection into our render function in the form of components whose sole purpose is to act as a container for hook calls.

Consider the case of a simple Modal component that accepts a close function, where we would like to memoize the close function using useCallback.

We may want to write code that looks like this:

1const Example = () => {
2  const [isOpen, setIsOpen] = React.useState(false);
3
4  return (
5    <div>
6      {isOpen ? (
7        // This violates the rule of hooks on branching
8        <Modal close={React.useCallback(() => setIsOpen(false), [setIsOpen])}>
9          Blah
10        </Modal>
11      ) : null}
12    </div>
13  );
14};

But due to the rule of hooks on branching, we're instead forced to write code that looks like this:

1const ModalWrapper = ({ setIsOpen }) => (
2  <Modal close={React.useCallback(() => setIsOpen(false), [setIsOpen])}>
3    Blah
4  </Modal>
5);
6
7const Example = () => {
8  const [isOpen, setIsOpen] = React.useState(false);
9
10  return <div>{isOpen ? <ModalWrapper setIsOpen={setIsOpen} /> : null}</div>;
11};

So we're forced to add an extra layer of indirection to what used to be a simple, self-contained render function, in addition to being forced to write a bunch of boilerplate for creating the new component and drilling in all the necessary props (TypeScript users will feel double the pain here as they'd have to duplicate type declarations for the drilled-in props as well).

Some readers may point out that they prefer the latter version to the earlier one, as they might feel encapsulating everything in that branch into a ModalWrapper component reduces noise and improves readability, i.e. that it's a useful layer of indirection.

That's a perfectly valid position to take, but I'd like to remind those readers that the decision on whether or not to add any layer of indirection should reflect a value judgement on whether or not we feel the indirection is actually useful (inherently subjective and should be made on case-by-case basis), not forced upon us by some arbitrary implementation detail of the library we're using.

This is where component-boundary comes in.

Installation

1npm i @lewisl9029/component-boundary

or

yarn add @lewisl9029/component-boundary

Usage

1import * as React from "react";
2import boundary from "@lewisl9029/component-boundary";
3
4const Example = () => {
5  const [isOpen, setIsOpen] = React.useState(false);
6
7  return (
8    <div>
9      {isOpen
10        ? // call boundary anywhere in the tree, without introducing a separate component
11          boundary(() => (
12            <Modal
13              close={React.useCallback(() => setIsOpen(false), [setIsOpen])}
14            >
15              Blah
16            </Modal>
17          ))
18        : null}
19    </div>
20  );
21};

The boundary function from component-boundary acts as a component boundary for all of your hook calls. You can add it anywhere inside the render tree to call hooks in a way that would otherwise have violated the rules of hooks, without adding any additional layers of indirection.

Note that it also works great for looping:

1import * as React from "react";
2import boundary from "@lewisl9029/component-boundary";
3
4const Example = ({ colors }) => {
5  return (
6    <ul>
7      {colors.map((color) =>
8        boundary(() => (
9          <li style={useMemo(() => ({ color }), [color])}>{color}</li>
10        ))
11      )}
12    </ul>
13  );
14};

However, keep in mind that you still have to obey the rules of hooks within the boundary function:

1import * as React from "react";
2import boundary from "@lewisl9029/component-boundary";
3
4const Example = ({ colors }) => {
5  const [isOpen, setIsOpen] = React.useState(false);
6
7  return (
8    <div>
9      {isOpen
10        ? boundary(() => (
11            <Modal
12              close={React.useCallback(() => setIsOpen(false), [setIsOpen])}
13            >
14              <ul>
15                {colors.map((color) => (
16                  // This still violates the rule of hooks on looping
17                  <li style={useMemo(() => ({ color }), [color])}>{color}</li>
18                ))}
19              </ul>
20            </Modal>
21          ))
22        : null}
23    </div>
24  );
25};

We can, however, nest additional layers of the boundary function to arbitrary depths to work around this:

1import * as React from "react";
2import boundary from "@lewisl9029/component-boundary";
3
4const Example = ({ colors }) => {
5  const [isOpen, setIsOpen] = React.useState(false);
6
7  return (
8    <div>
9      {isOpen
10        ? boundary(() => (
11            <Modal
12              close={React.useCallback(() => setIsOpen(false), [setIsOpen])}
13            >
14              <ul>
15                {colors.map((color) =>
16                  // All good now
17                  boundary(() => (
18                    <li style={useMemo(() => ({ color }), [color])}>{color}</li>
19                  ))
20                )}
21              </ul>
22            </Modal>
23          ))
24        : null}
25    </div>
26  );
27};

(Though the extra levels of indenting could make code impractical to read past a certain point, so at some point we may still want to break down into separate components.)

Now we can go back to adding indirection only when we feel it's useful, instead of being forced to every time we want to call a hook inside a branch or loop.

Linting

If you're using eslint-plugin-react-hooks, you'll get errors when trying to use component-boundary due to the plugin not recognizing that boundary can be treated as a valid component boundary.

I've created a fork of the plugin at https://www.npmjs.com/package/@lewisl9029/eslint-plugin-react-hooks to add support for this pattern. The changes are very naive however, so I do anticipate plenty of edge cases. Please feel free to report any issues you find with the plugin here.

How it works

The implementation is literally 2 lines:

1export const Boundary = ({ children }) => children();
2export const boundary = (children) => React.createElement(Boundary, { children });

By packaging it as a library I'm mostly trying to promote the pattern and make it easier to get people started using it. Feel free to simply copy paste this into your project and use it directly, replacing the eslint plugin with my fork from above. I hope to eventually document this pattern in an RFC so we can get official support for it in the linting rule without having to maintain a fork.

License

MIT