What is one thing in React that you discovered very late?

Recently I discovered that in nested components, child components are the first to render. Here are some of my observations.

How to test?

• Just console something in componentDidMount or useEffect of each component

How to revert this flow?

• Use componentWillMount and a react hook equivalent to componentWillMount

Why revert?

• There may be a case where some data from API is passed down as props to your child component.
• Due to the async nature, there won't be any data to render for the child and you might get the red flag.🛑

What if I don't want to revert?

• Using conditional rendering in such cases is the ideal solution

function demo(props) {
    return (
      props.data ? <MyComponent /> : <LoadingAnimations />
    )
}

Do let me know about the basic discoveries you made. 👊

PS

Please let me know if I've made any err in this post. 😅