React Hook "useEffect" cannot be called inside a callback error occurs

user_10813827 0
Viewed 1312

The error below sometimes occurs I don't know why. Every code seems to work but only an error occurs.

React Hook "useEffect" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks Search for the keywords to learn more about each error.

import { useEffect, useState } from 'react'

import { useAuthContext } from 'src/contexts/Auth'

import { brandRepository } from 'src/repositories/BrandRepository'

export default function TestBrand() {
  const [brands, setBrands] = useState<any[]>()

  const { currentUser } = useAuthContext()

  useEffect(() => {
    if(!currentUser) return
    useEffect(() => {
      brandRepository.list(currentUser.id).then(async (docs: any[]) => {
        if(!docs) return
        await setBrands(docs)
      })
    }, [])
    }, [currentUser])

  if(!currentUser) {
    return <div>Loading...</div>
  }

  return (
    <div>test</div>
  )
}
reactjs
3 Answers

You cant call useEffect or other hooks inside a function or CB you can only call hooks inside Function component https://reactjs.org/docs/hooks-rules.html

Blockquote Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls

user_159389650

You cannot use useEffect inside another useEffect. Try using both the hooks separately as it forbids the rules of hooks. Better don't use the second useEffect as I do not see any specific use of it. Refer this https://reactjs.org/docs/hooks-rules.html

user_188343050

It seems that in useEffect you are making a network request for one time if the currentUser exists. In this case you don't need 2 useEffect. if can do it like this

useEffect(() => {
    if(!currentUser) return
    
      brandRepository.list(currentUser.id).then(async (docs: any[]) => {
        if(!docs) return
        await setBrands(docs)
      })
    
 }, [currentUser])
user_115538350
Related