Parent Child ‐ react component render - florypaul/ReactJS GitHub Wiki

In the blow example the output will be:

App A B C D and A - because of useEffect state update then it stops and won't render B or C because B is not prop child to A it's just a children of A and does not cause re-renders

import React, { useState, useEffect } from 'react' import ReactDOM from 'react-dom'

function A({ children }) { console.log('A') const [state, setState] = useState(0) useEffect(() => { setState(state => state + 1) }, []) return children }

function B() { console.log('B') return }

function C() { console.log('C') return null }

function D() { console.log('D') return null }

function App() { console.log('App') return (

) }

const root = ReactDOM.createRoot(document.getElementById('root')); root.render()