React hooks inside a curry function (creating a HOC) returning an error from linter 'React Hook "useContext" cannot be called inside a callback'

Question

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

Answer 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.

Answer 2

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

The HOC pattern should work, but is very specific.