Minified React error #311

According to react official docuemntation, this error occurs when we call React Hooks from regular JavaScript fucntion. We could fix this error by looking on the use of Hooks and only call Hooks from React Functions.

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

- Call Hooks from React function components.
- Call Hooks from custom Hooks (we’ll learn about them on the next page).

Check your fucntion in the code, fucntion should be a React JS function not general JavaScript function. A React function should have following four things into it.

React functions:

1. Follow React component naming convention, i.e. they must be Capitalized
2. Take a single props object argument
3. Return valid JSX
4. React functions are NEVER invoked. A reference to them is passed or they are referenced as JSX

References

• Rules of Hooks – React (reactjs.org)
• Rules of Hooks Explanation – React (reactjs.org)
• Difference between Regular javascript functions and React Functions