React Hook "useDispatch" is called in function "loginForm" which is neither a React function ponent or a custom React Hook function react-hooks/rules-of-hooks

I got this kind of message. Attached code...

import React from 'react'
import { useDispatch} from 'react-redux'

const loginForm = () => {
  const dispatch = useDispatch()
  
  return (
    <div>lgoinForm</div>
  )
}

export default loginForm

React Hook "useDispatch" is called in function "loginForm" which is neither a React function ponent or a custom React Hook function react-hooks/rules-of-hooks

I got this kind of message. Attached code...

import React from 'react'
import { useDispatch} from 'react-redux'

const loginForm = () => {
  const dispatch = useDispatch()
  
  return (
    <div>lgoinForm</div>
  )
}

export default loginForm

• javascript
• reactjs
• react-hooks

2 Answers 2

Rename loginForm to LoginForm (ponent should start with a capital letter).

I have tested your code and it works fine after naming the ponent correctly.

Read here and here

You can make the loginForm to useLoginForm it should be a custom hook name starting with use keyword.