Warning when using react hooks in HoC

The official React Hooks documentation says:

Don’t call Hooks from regular JavaScript functions. Instead, you can:

✅ Call Hooks from React function components.

✅ Call Hooks from custom Hooks.

As @AsafAviv said, you should refactor your HOC into a custom hook to avoid violation the Rules of Hooks.

---

The reason is described in the FAQ by the way:

How does React associate Hook calls with components?

React keeps track of the currently rendering component. Thanks to the Rules of Hooks, we know that Hooks are only called from React components (or custom Hooks — which are also only called from React components).

There is an internal list of “memory cells” associated with each component. They’re just JavaScript objects where we can put some data. When you call a Hook like useState(), it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one. This is how multiple useState() calls each get independent local state.

Convert the

props => {
  React.useEffect(() => {
    // Do something here
  }, []);
  return <Component {...props} />;
};

inside your HOC to a function (react-hooks/rules-of-hooks is throwing that warning you showed when used in an arrow function returned by a HOC)

So, change it to

const Wrapper = Component =>
  function Comp(props) {
    React.useEffect(() => {
      console.log("useEffect");
    }, []);
    return <Component {...props} />;
  };

and the effect gets triggered.

Here is a working example on codesandbox