How to dismiss this warn, getNFTBalance involved in react in useEffect dependency

Have no idea, what should I do?

React Hook useEffect has missing dependencies: 'getNFTBalances' and 'user'.

I tried below way, but not sure, whether the correct method.

1 Like

you njust need to add the names of those functions into the depednancy array

1 Like

somtimes this will cause an infinite render loop though so if this is the case you will need to wrap your getNFTBalances inside a useCallabck.

1 Like

Looks, useCallback, will involve another more warn.

import { useEffect } from "react"
import { useNFTBalances } from "react-moralis"
import { Box, Image, Text } from "@chakra-ui/react";
import CustomContainer from "./CustomContainer"

export default function Nft({ user }) {

  const { getNFTBalances, data } = useNFTBalances()

  // declare the async data fetching function
  const fetchData = useCallback(async () => {

    await getNFTBalances({
      params: {
        chain: process.env.CHAIN_NAME,
        address: user.get('ethAddress'),
      }
    })
  }, [])

  useEffect(() => {

    fetchData()

  }, [])

  return (
    <CustomContainer>
      <Text fontSize="xl" fontWeight="bold">My NFTs</Text>
      {data && data.result.map(nft => (
        <Box key={nft.token_uri} mt="4" px="2" py="2" borderWidth="1px" borderRadius="md">
          {nft.image && <Image alt="img" src={nft.image} />}
          <p>{nft.token_uri}</p>
        </Box>
      ))}
    </CustomContainer>
  )
}

Do you only want to run getNFTBalances once on component mount? If so this is ok.

1 Like

@skylon.jose yes you will need to put getNFTBalances in that dependancy array also

any time your using a hook like use memo, useEffect and useCallback etc and you calling a state chaning function or variable in the hook you need to add this to the dependnacy array of the hook. in useEffects its to let it kniw when to execute the code in the useEffect so if any one of the items in the depenancy array changes the useEffect will execute, in useMemo the items in the dependancy array will cause the useMemo to rerun and in useCallback the items int the dependancy array prevent the callback from rereunning

change code to

import { useEffect } from "react"
import { useNFTBalances } from "react-moralis"
import { Box, Image, Text } from "@chakra-ui/react";
import CustomContainer from "./CustomContainer"

export default function Nft({ user }) {

  const { getNFTBalances, data } = useNFTBalances()

  // declare the async data fetching function
  const fetchData = useCallback(async () => {

    await getNFTBalances({
      params: {
        chain: process.env.CHAIN_NAME,
        address: user.get('ethAddress'),
      }
    })
  }, [getNFTBalances])

  useEffect(() => {

    fetchData()

  }, [fetchData])

  return (
    <CustomContainer>
      <Text fontSize="xl" fontWeight="bold">My NFTs</Text>
      {data && data.result.map(nft => (
        <Box key={nft.token_uri} mt="4" px="2" py="2" borderWidth="1px" borderRadius="md">
          {nft.image && <Image alt="img" src={nft.image} />}
          <p>{nft.token_uri}</p>
        </Box>
      ))}
    </CustomContainer>
  )
}

no hes wrapping it in a useCallback to prevent infinite rerender from having it in the dependancy array of the useEffect

1 Like

I was referring to his original code. The linting will always warn about empty [] dependencies even if it’s intentional (run on mount) because it can’t tell otherwise.

1 Like

@glad ohhh terribly sorry yeah i misread ur message then my bad. yeah i think then if he wants to get rid of tit this way then he can just define a function whih calls getNFTBalances and call it from within the useEffect provided he only wants to call it on page load. so it will depend

useEffect(() => {
  (async function() {
    await getNFTBalances({
      params: {
        chain: process.env.CHAIN_NAME,
        address: user.get('ethAddress'),
      }
    })()
},[])
1 Like

No worries, I should have replied to/quoted the original post.

1 Like

this code cannot work…

image

1 Like

@skylon.jose his is my bad sorry was writing code directly in the message chat missed the closing curly bracket for your params. that my my mistake but you should really take the time to learn some of these hooks before trying to deep dive into react, things like mismatching brackets and hook dependancies are really important to learn to optimize your code and have it not doing more rerenders than it needs

 useEffect(() => {
      (async function() {
           await getNFTBalances({
               params: {
                   chain: process.env.CHAIN_NAME,
                   address: user.get('ethAddress'),
    //extra curly bracket and curvy braxket on this line to close 
   //the params object and the getNFT's function
              }})
         })()
    },[])

Below is what I tried to express…
Actually, I did do what you want…
And, in any time, I really appreciate, all of you to take time to help me, deeply.
image

1 Like

at this point im not sure why that is happending. the quigly warning doesnt come up on my machine. as shown below. as @glad suggest you can ignore this as its standard syntax for useEffect when you want the useEffect to only run once on page load.

if you really want to get to the core of the issue then open the console in the browser react will give u ijstructions on how to fix the useEffect warnings

1 Like