CODEWITHSUNDEEP
reactjs
k10a
k10a

Reputation: 1087

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

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>
  )
}

Upvotes: 4

Views: 8726

Answers (3)

Maddy
Maddy

Reputation: 46

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

Upvotes: 3

Amirhossien Salighedar
Amirhossien Salighedar

Reputation: 311

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

Upvotes: 1

sazzad
sazzad

Reputation: 525

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])

Upvotes: 0

Related Questions