DEV Community

loading...
Cover image for What is one thing in React that you discovered very late?

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

Nitin Sahu
Software Engineer
・1 min read

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 />
    )
}
Enter fullscreen mode Exit fullscreen mode

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

PS

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

Discussion (0)