Next.js React.js doesn't renders useState that I'm getting in useEffect

Question

I'm getting Array of objects inside useEffect:

Then I'm trying to map it and render:

And I'm getting the result that it doesn't render it. Firstly it get's an empty Array as default and when State changes in useEffect it doesn't rerender it. Why and how to solve it? (Next.js + React.js maybe some troubles with next? )

Answer 1

You just need to add the tokens to your useEffet deps.

useEffect(()=>{
    //using tokens or whatever
}, [tokens])

You'll also don't want infinite loop state changing so you'll need to add a condition of setTokens and that condition would be:

useEffect(()=>{
    if (tokens.length === 0) {
        //do whatever you want
        setTokens(newTokens);
    }
}, [tokens])