What happens in the first step of this program flow-React-useState hook?

[shivajikobardan]

Code for this is here:

https://codesandbox.io/s/floral-frog-7zfon3

I got the general idea of program flow in this case.

First user clicks a button, then function gets called, that function in turn updates the state from initial [] state to [{id:1,value:0.12232}]. Now the array map accesses the value and displays in a list.

But what happens initially when array items is empty? The items.map must run since it's before click event. What happens there?

 

[wasab]

Nope, map runs but its callback isn't. Doing a map on zero length arrary is similar to a for loop on an array with length of 0.

for(let i = 0; i< arr.length; i++）

 

Map will just returns an empty array as well because nothing is there to map. 

btw, if you want to see what the variables is initially, console.log these variables. you can set breakpoint using the chrome debugger as well althgough i wouldnt recommend doing it on a react project. A lot of the code are asynchronous so debugger jumps all over the place and somethimes the code you see are all minify nonsense which isnt helpful.