Hello , guys ... Im react beginner trying to understand rendering orden on nested components .. lets supose following structure and console output. ``` import { useState, useEffect } from 'react' import React from 'react' export const Comp2 = () => { console.log("from component 2") useEffect(() => { console.log("from component 2 useEffect") }) return ( <>

Component 2

) } export const Comp1 = () => { console.log("from component 1"); useEffect(() => { console.log("from component 1 useEffect") }) return ( <>

Component 1

) } export const Comp3 = () => { const [count3 , setCount3] = useState(10) console.log("from component 3"); useEffect(() => { console.log("from component 3 useEffect") }) return ( <>

Comp3

{count3} ) } function App() { const [count1, setCount1] = useState(0) const [count2, setCount2] = useState(0) console.log("Starting count1 / count2:", count1,count2); useEffect(() => { console.log("from App useEffect") }, ) return ( <> {count1} {count2} ) } export default App ``` After F5 on browser, Im recibing following output: ``` Starting count1 / count2: 0 0 from component 1 from component 2 from component 3 from component 3 useEffect from component 2 useEffect from component 1 useEffect from App useEffect ``` I have following thoughts: 1 Components Processing order depends on nesting order. 2 Why log lines are printed in order begging on the father component to deeper child ? 3 Why log lines inside useEffect hooks are printed on reverse order? 4 Incrementing counter 3 only triggers component 3 render... 5 Incrementing counter 1 or 2 renders all nested components,How can I prevent this? Any brief explaination / document to read would be great. thanks.

leostereo

component process order

Join Our Newsletter. No Spam, Only the good stuff.