How to console.log data from an API call in this situation?

Question

In getData() function, I'm console.logging data to see if it set in the state properly after an asynchronous call. It's returning Array[] which I'm guessing means that the data set but console.log is running before the fetch finishes.

The console.log in the useEffect works properly although it will log it twice.

Is there a way to console.log inside of getData() function or is it the proper way to do it in the useEffect?

useEffect console.log runs twice because I'm guessing once after the data is retrieved and set into state, and then after it's set, it console logs it again after the re-render.

const TestComponent = () => {
    // State for Data
    const [data, setData] = useState([])
    // URL for Data
    const url = 'https://randomuser.me/api/?results=20'
    // Retrieve Data - Function
    const getData = async() => {
        const { results } = await (await fetch(url)).json()
        setData(results)
        console.log(data)
    }
    
    useEffect(() => {
        getData()
        console.log(data)
    },[])
return (JSX)

the best choice is to stop using `console.log()` and to use an actual debugger - either in the browser or an IDE. — Randy Casburn, Oct 29 '21 at 17:45
Yes, please read react life cycles once again, how they correlate with hooks, the second parameter in use effect and when does what run w.r.t. componentDidMount and componentDidUpdate. Also learn about why JavaScript is a non-blocking event driven language essentially learn the event loop. — Anuraag Barde, Oct 29 '21 at 17:46

score 1 · Accepted Answer · answered Oct 29 '21 at 17:41

1

Run an effect whenever state data changes

useEffect(() => {
  if(data.length) {
    console.log(data)
  }
}, [data])

answered Oct 29 '21 at 17:41

Shahzaib

313
2
8

This causes an infinite loop. Please, update your answer – ABDULLOKH MUKHAMMADJONOV Oct 29 '21 at 17:45
1

this won't cause an infinite loop, the data will get logged whenever it changes and I guess according to the question the API call will run only once on mount so the data will be changed just once If this is not the case, can you please explain a little so I can update the answer – Shahzaib Oct 29 '21 at 17:48
Its just logging the state not updating I guess – Shahzaib Oct 29 '21 at 17:52
After troubleshooting you were right. So I don't need the if statement just the console.log(data) and data in the dependency array. I had to remove getData() out of the useEffect and instead use a button to call it. The infinite loop is caused if I run getData() in the useEffect – pancake Oct 29 '21 at 18:05
I'm glad it helped. the if condition is for unnecessary logging I use most of the time to only get log when the data is available. Its up to you to add it as it don't has any effect other than this. – Shahzaib Oct 29 '21 at 19:57

score 0 · Answer 2 · answered Oct 29 '21 at 17:45

const getData = async() => {
        const { results } = await (await fetch(url)).json()
        setData(results)
        console.log(data)
    }
    
    useEffect(() => {
        getData()
        console.log(data)
    },[])

useEffect only execute once, you are seeing console.log twice simply because one in getData while another in useEffect

How to console.log data from an API call in this situation?

2 Answers2