I'll skip straight to the question right away. If you are in a Parent component, and you are mapping through an array to create Child components....and inside the Child component, you have a mounting function.....does that mounting function run during every iteration of the Parent's map? Or does React batch collect all Child components and mount them on the DOM after it finishes the entire map?

When I look at the readings from my console, it looks like the mounting code in the Child component is running only after the Parent is done with the map.

To be more specific, if my array is 10 values long, the console shows 10 statements of " arr Passes Test ", and only after that it displays " mount hook called ".

Why is this happening? I was expecting the console to first log the statement from Parent and then log the statement from Child after mounting it. Not batch collect it for the map and mount all 10 Childs at once.

Is there a way to prevent this behavior?

(Ps: I need it to mount on each iteration because I want to update a state variable before it renders future components in that same map)

function Parent(){
    
    return(
        arrPassesTest(arr) ?
        arr.map( (val, index) => {
            return (<Child val={val} index={index}/>)
        } )
    )
}

    function arrPassesTest(arr){
    console.log("arr Passes Test");
    return true;
    }

------------

function Child(){
    
    useEffect(()=>{
        console.log("mount hook called");
    },[])

}