Function does not enter useEffect

Question

I have this little project to make a beast clone of Linktree with Ode, but I have a boring problem. The default function simply does not enter useEffect, which is where I call the existing Trees. Therefore, it gives error, saying that the array is Undefined.

This is where it shows the values...

You just don’t get in. I’m a beginner in React, I believe I’m really missing something, but I can’t see what it is. I’m doing it together with a friend, and in his it worked right.

Answer 1

useEffect is an React hook that controls the component lifecycle. You can imagine him thinking of the following metaphor: "React, every time the X condition changes, repeat this code".

The basic structure of the useEffect is the anonymous function and an array containing the dependencies for this function to be executed. If the array is empty useEffect will be called when the component is rendered. For example:

function MeuComponente(){
    useEffect(() => {
        //Faça algo
    }, [])
}

In your case you are wanting to call an asynchronous function but React does not allow it to be declared that way, so you will have to create a function (within the anonymous function) if you want to work with await in the files.

function MeuComponente(){
    useEffect(() => {
        async function fazRequisicaoApi(){
            //Faça sua requisição aqui
        }

        fazRequisicaoApi()
    }, [])
}

One nice thing to know is to use return inside the hook will cause the returned function to be executed when the component is unmounted from the screen.

Good luck, anything we’re here to help you :)

Answer 2

There are two points in your code that I believe are important you fix and that will probably solve your problem.

1. The function passed to the useEffect should not be a function async, the correct would be:

useEffect(() => {
...
}, [])

you can use the traditional then and catch to make asynchronous calls, but in case you want to use async/await you can do something like this:

  useEffect(() => {
    async function fetchMyAPI() {
      let response = await fetch('api/data')
      response = await response.json()
      dataSet(response)
    }

    fetchMyAPI()
  }, [])

2. the useEffect "should" receive a second parameter, this parameter is not mandatory, but in most cases you will want to declare it to avoid unnecessary executions. This second parameter is basically a array with values that React will be "observing", if any of these values is changed your useEffect will run again, usually values like state or properties passed to the component are added in this array, if they are being used by useEffect. I strongly recommend you take a look at this documentation section: Hooks Reference API - useEffect

In your case you could change your useEffect leaving him like this:

useEffect(() => {
  axios.get('...').then(res => setTrees(res.data)).catch(() => alert("error"))
}, [emailTest])

Another important detail would be to initialize your state so that it maintains the type of data you would like to store, for example, I suppose that trees be an array of objects, so that you do not have a type error when using the method map, recommend you change your status statement leaving it that way:

const [trees, setTrees] = useState([])

with this you ensure that your code will not break as long as the call to the api in is finished.