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

user_6822524 0
Viewed 4112

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

high-order-component react-hoc react-hooks reactjs currying
2 Answers

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.
user_41727420
user_43988960
Related