React Element’s “Parent” vs “Rendered By”

A key concept of React we tend to forget, quickly explained.

Vitali Zaidman
Nov 11, 2019 · 2 min read
Image for post
Image for post
How come a React element’s parent might not be the one who renders it?

When I debug functionality and performance in a React app, I always keep in mind the difference between who created a certain element vs. it’s parent vs. the reason for it’s render. I would like to share my experience in this regard with you.

Meet App, Parent, and Child. They would be the React components we use to understand React life-cycle a little bit better using the following sandbox.

The React components we are going to work with.

When App (re-)renders, the flow is as follows:

1. Child elements are created by App and passed to the element creation of the Parent Element as the “children” prop.

React Element Creation Order
App ➜ Child ➜ Parent

It’s very easy to see by looking at the traspiled version of App.

The Child React elements are first created and then passed to the creation function of Parent.

2. Render functions are called in their order in the React Virtual DOM hierarchy.

React Element Render Order
App ➜ Parent ➜ Child

3. The elements are then mounted in the opposite order, from the bottom of the hierarchy.

React Element Mount Order
Child ➜ Parent ➜ App

Points 2 and 3 can be seen by the logs produced in the sandbox:

Image for post
Image for post
Renders go from top to bottom and mounts from bottom to top.

Notice that Parent is not the one that creates Child elements. They are passed to Parent in the prop. To prove it, notice that when we click on the “increase” button, only the Parent is re-renders and uses the same children passed to it by App without re-rendering them.

Child elements are rendered by App, and would be re-rendered whenever App re-renders.

This examples helps us to settle the difference between React element’s “parent” element and “rendered by” element.

This is a very important difference to keep in mind when debugging functionality and performance. React element’s “rendered by” can be found when inspecting it using React Developer Tools.

Image for post
Image for post
React developer tools helps us see that Child is rendered by App.

So next time a component re-renders unexpectedly, don’t automatically blame it’s father for it. Open React Developer Tools to find the real element that’s responsible for it.

Another example to how this knowledge can be applied to performance improvement can be found in Nir Avraham’s article: How to reduce unnecessary re-renders.

Check it out for yourself:

The main sandbox.

Welldone Software

The leading full-stack consultancy.

Vitali Zaidman

Written by

https://twitter.com/vzaidman ⎝(•ω•)⎠ https://vzaidman.com

Welldone Software

The leading full-stack consultancy. Creating amazing frontends and rock-solid backends using top notch technologies and practices. Visit us at https://welldone.software.

Vitali Zaidman

Written by

https://twitter.com/vzaidman ⎝(•ω•)⎠ https://vzaidman.com

Welldone Software

The leading full-stack consultancy. Creating amazing frontends and rock-solid backends using top notch technologies and practices. Visit us at https://welldone.software.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store