DEV Community

Cover image for Understanding Rendering in React ♻ ⚛️

Understanding Rendering in React ♻ ⚛️

Mateo Garcia on January 31, 2021

Hey there! 👋🏼 I'm Mateo Garcia, I co-organize a community in Medellin, Colombia called React Medellin. This year I started a series of posts calle...
Collapse
 
ohpyupi profile image
supergentle

I think the heuristic algorithm's time complexity drops to O(n) with some constraints. reactjs.org/docs/reconciliation.ht...

Collapse
 
mateo_garcia profile image
Mateo Garcia

You're right 🤔

Collapse
 
vupadhayayx86 profile image
vupadhayayx86

How Virtual DOM is mapped with Real DOM on the first Render? Isn't it time consuming to do all this conversion from JSX to JS and then create a virtual DOM and map it with the real DOM? I want to understand how initial render happens?

Collapse
 
adarsha profile image
Adarsh Kumar Bhautoo

Great article!

Collapse
 
mateo_garcia profile image
Mateo Garcia

Thank you, Adarsh :)

Collapse
 
aralroca profile image
Aral Roca

I have the doubt if the new Virtual DOM is created after or before re-rendering. According to the order of the processes it seems that first is the Virtual DOM and then the re-render, but I always thought it was the other way around, because how do you know what new elements the new Virtual DOM will have without doing the re-render? Thank you.

Collapse
 
dthakur001 profile image
dthakur001

NICELY EXPLAINED!!!

Collapse
 
mateo_garcia profile image
Mateo Garcia

Thank youu :)

Collapse
 
maxkoretskyi profile image
Max • Edited

If anyone's interested, here's a more in-depth coverage of the process described in the article indepth.dev/posts/1008/inside-fibe...

Collapse
 
etta profile image
Marrietta

Hi,
I'm just trying to upload a simple design on to a tee on Fourthwall and a box comes up showing 0% and says "Initializing Rendering. This could take a few minutes. Do not close this window. " It has been at 0% for hours and I have no clue as to what rendering is. Extremely frustrating since this is the first design I am loading and I am trying to launch a business.

Collapse
 
melnikkk profile image
Alexander Melnik

Good job! Thank you for this article!)

Collapse
 
mateo_garcia profile image
Mateo Garcia

Thank you, Alexander :)

Collapse
 
killianfrappartdev profile image
Killian Frappart

Perfectly explained and interesting topic! Well done 👏

Collapse
 
mateo_garcia profile image
Mateo Garcia

Thank you for reading it, Killian :)

Collapse
 
j836 profile image
Prajwal Jain

Thank You for this Article!!Well framed!

Collapse
 
xuantruong1999 profile image
Xuan Truong

thank you!

Collapse
 
gilesomofa profile image
Giles Smith

Great article. Nice succinct explanations!!!! Great for a newbie.

Collapse
 
yarivshamash profile image
Yariv Shamash

Super nice! and makes sense of it all.
Thanks :)

Collapse
 
mateo_garcia profile image
Mateo Garcia

Thank you, Yariv!

Collapse
 
naveadkazi profile image
Navead Kazi

Easy to understand and knowledgeable article

Collapse
 
mateo_garcia profile image
Mateo Garcia • Edited

Thank you, Navead!

Collapse
 
sumitsood3127 profile image
sumeet sood

IN Reconciliation you said -
Upgrades within the element's children recreate all children

but we sknow that react updates only those part's of DOM that are required to be updated

Collapse
 
ameeraabed profile image
ameera-abed

thanks great job

Collapse
 
aligulmaliyev profile image
Ali Gulmaliyev

it is perfect

Collapse
 
radragonorama profile image
Radragonorama

Thanks for the helpful article!

Collapse
 
uthirabalan profile image
Devi

Thank you.its helpful