render-hooks

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

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

1import * as React from "react";
2import hooks from "@lewisl9029/render-hooks";
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          hooks(() => (
12            <Modal
13              close={React.useCallback(() => setIsOpen(false), [setIsOpen])}
14            >
15              <ul>
16                {colors.map((color) =>
17                  // Or within a mapping function?
18                  hooks(() => (
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 render-hooks comes in.

Installation

1npm i @lewisl9029/render-hooks

or

yarn add @lewisl9029/render-hooks

Usage

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

The hooks function from render-hooks 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 hooks from "@lewisl9029/render-hooks";
3
4const Example = ({ colors }) => {
5  return (
6    <ul>
7      {colors.map((color) =>
8        hooks(() => (
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 hooks function:

1import * as React from "react";
2import hooks from "@lewisl9029/render-hooks";
3
4const Example = ({ colors }) => {
5  const [isOpen, setIsOpen] = React.useState(false);
6
7  return (
8    <div>
9      {isOpen
10        ? hooks(() => (
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 hooks function to arbitrary depths to work around this:

1import * as React from "react";
2import hooks from "@lewisl9029/render-hooks";
3
4const Example = ({ colors }) => {
5  const [isOpen, setIsOpen] = React.useState(false);
6
7  return (
8    <div>
9      {isOpen
10        ? hooks(() => (
11            <Modal
12              close={React.useCallback(() => setIsOpen(false), [setIsOpen])}
13            >
14              <ul>
15                {colors.map((color) =>
16                  // All good now
17                  hooks(() => (
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 render-hooks due to the plugin not recognizing that hooks 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 Hooks = ({ children }) => children();
2export const hooks = (children) => React.createElement(Hooks, { 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.

Alternative API

Before v2, we provided a Hooks component as the default export that can be used like this:

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

Since v2, the default export has been changed to the newly introduced hooks function, which ends up being a lot more ergonomic to use due to the much simpler syntax and lower levels of indentation.

However, we do still provide the Hooks component as a named export for backwards compatibility, and for anyone who happens to prefer the old API. Simply change your import statement to:

1import { Hooks } from '@lewisl9029/render-hooks'

The linting rule fork will continue to support both variants.

License

MIT