2

In my project, I got rid of classes and I'm just using Hooks. Now that I'm trying to create a HOC, my linter is returning an error for using Hooks inside my curry function. This is the simplified version of my code:

const myCurryFunction = WrappedComponent => props => {
  const [state, setState] = React.useState();
  return <WrappedComponent {...props} />
}

And the full eslint error is this one:

React Hook "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.

Any clue? I'll really appreciate any advice

Felipe Funes
  • 61
  • 1
  • 5
  • Hooks must be called on the top level of our components https://reactjs.org/docs/hooks-rules.html – keikai Mar 06 '20 at 01:22
  • Following that, I tend to think that we cannot use hooks with this HOC pattern :/ – Felipe Funes Mar 06 '20 at 01:38
  • Can it be done with a custom hook? – Joseph D. Mar 06 '20 at 01:52
  • What do you mean @JosephD.? To move all my logic into a custom hook and then using this inside my curry function? If yes, I don't think so. If hooks are complaining because they have to be at the top is because otherwise can bring bugs for the order on how are executed. – Felipe Funes Mar 06 '20 at 02:21

2 Answers2

1

Two choices for you.

  1. Respect the rules of hooks, make changes to your code.

    const myCurryFunction = WrappedComponent => function Comp(props) { const [state, setState] = React.useState(); return }

  2. Turn off the lint for the source file.
Pengson
  • 845
  • 5
  • 10
1

I found this github issue: https://github.com/facebook/react/issues/20531

The HOC pattern should work, but is very specific.

John Vu
  • 85
  • 8