How React Works behind the scenes - Pluralsight audition

[@19joaoreis96]

Really good, I honestly don't know why this has so low number of views, it's the best one I found to introduce me to React. Thank you sir for taking your time to explain so patiently and detailed how the DOM is changed and how React changed the rendering "game".

[@codewithsandip]

Thanks

[@krylonpoet]

Of all the videos that I’ve watched on react this is by far the most clear explanation of what react does behind the scenes. It’s also backed up with a very simple example that demonstrates the power of react.

[@codewithsandip]

Thanks

[@אלעדר]

I agree

[@PurpleCJ]

This video is the definition of Crystal Clear!

[@codewithsandip]

Thanks 🙏

[@markotweyo]

This is the best explanation about React on RUclips.

[@codewithsandip]

Thanks. Glad you liked it.

[@prasada2874]

The best explanation of "React Virtual DOM" I have ever seen. Simple , Clean & Precise. Thanks a lot !!

[@codewithsandip]

Thanks

[@lauramangu2516]

Thank you for taking the time to do this! As others said, one of the most clear explained videos! Keep it up!

[@codewithsandip]

Thanks

[@rajjasoliya9147]

one of the best explaination on DOM thanks sir please keep it up

[@codewithsandip]

Thanks

[@kpcPrasad]

I have been roaming around the internet for days and finally found the FABULOUS explanation of Virtual DOM. Thanks

[@codewithsandip]

Thanks

[@sambritpradhan9735]

Best way of explanation...thank you very much Sandip.

[@codewithsandip]

Glad u liked it. Thanks.

[@ryryadaya6835]

I wish you could create more tutorials about React, and I agree with the rest of this dude you really did a good job here! Thank you!

[@codewithsandip]

Yup, working on it.

[@anshshrivastava9107]

the 7 dislikes are from the ones who don't know react.
Great video man I learnt something new today.

[@codewithsandip]

Thanks

[@rakibulhashan5446]

The Easiest example and explanation I have ever seen!!

[@codewithsandip]

Thanks

[@dhevendhiranm4138]

Excellent! Very informative using simple terms and with clear explanations. Thanks for the video.

[@codewithsandip]

Thanks. I m glad you liked it.

[@ruchish4]

woww... what a simple yet powerful way to explain react working. Amazing work. This video should get millions of views. Thank you so much !!

[@codewithsandip]

Glad you liked it!

[@ArpithaIndira]

Okay nice explanation with detailed example..keeping creating more like this ..thank you ❤

[@9716664106]

one of the best video found to understand the react. Thankyou !

[@codewithsandip]

Thanks

[@rahulsyt_]

Offf....Sooo...finally I got to know how React works. Thanks a lot, Brother!

[@codewithsandip]

Thanks

[@shubhajithalder2054]

Exactly what I was looking for. Best explanation ever with live example.

[@codewithsandip]

Glad it helped. Thanks.

[@magik7395]

Best video I have seen for What is React, very clear explanation.

[@codewithsandip]

Glad it was helpful!

[@tripathysantanu]

I am a big fan of you now and I am watching every single video of your channel 🙏🙏
As always this video was clear and concise and very useful 👍

[@codewithsandip]

Thanks

[@aravindvenkata8475]

REALLY SO BRILLIANT AND SOOOOO INFORMATIVE

[@codewithsandip]

Thanks

[@ayushikarn1893]

i learn only by doing. I have now understood the Virtual DOM . omg how good this explanation is just wow.

[@codewithsandip]

Thanks

[@prayasarora]

Wow, that was such an awesome video. I have been learning react from a few months now and always see people directly jumping to the codes without assisting with things like DOM manipulation, Virtual DOM to name a few. Thank you so much for this fruitful video. Please go ahead and make more informative content on complex topics like this.

[@codewithsandip]

Thanks. Glad you liked it. I m on it.

[@nayeemahmed5169]

How nice demonstration it is!! This is pretty much helpful to understand React. Thank you so much Sandip.

[@codewithsandip]

Thanks.

[@murageshnad2420]

wow, Amazing explanation sir, now i got how react works..

[@codewithsandip]

Glad it helped

[@anassaifi7613]

Bestest explanation on RUclips

[@codewithsandip]

Glad you think so!

[@jahajbalal8502]

Perfect example on how virtual dom works , really informative ..
Thanks sir

[@codewithsandip]

Thanks

[@subhashgn1775]

Thank you, your explanations were very clear.

[@codewithsandip]

Thanks

[@user-kh5ux5cy6q]

Nice video! Thank you for the thorough explanation.

[@khursheedalam3057]

Very well explanation. One small question, where this Virtual DOM data store as it keeps current and Prev state for compare it.

[@codewithsandip]

I think it should be in memory which browsers environment

[@RodneyKimbangu]

Best React "what-is" video I have found. God bless you, Sir!

[@codewithsandip]

Thanks

[@vinobhamanoharan5068]

It's really great... Thank you for your effort. I wish you to create more useful videos...

[@codewithsandip]

Thanks

[@nikunjsoni123]

Thanks for wonderful explanation of React! Very nice video!

[@codewithsandip]

Thanks

[@kimerared]

Excellent explanation. Thank you for making it easy to understand.

[@codewithsandip]

Thanks

[@eyasuberg2717]

Excellent! Clear and to the point! Thank you!!!

[@codewithsandip]

Thanks

[@missinglink2416]

The clearest explanation!!!!!

[@codewithsandip]

Thanks

[@billchen4923]

Awesome video, you really explain Virtual Dom crytical clear.

[@codewithsandip]

Glad it was helpful!

[@muhammadtalhabaig1725]

Thank you brother for such a good explanation!

[@codewithsandip]

Thanks 🙏

[@emmanuelmonlenyode83]

A million thanks for this explanation

[@codewithsandip]

Glad it was helpful!

[@kunpeng8646]

the BEST one in terms of explaining how React works! look 8:20, it's a moment of "I got"!!

[@codewithsandip]

Glad it helped.

[@kiransaravade5127]

crystal clear explanation !! thanx

[@codewithsandip]

Thanks

[@orhanors1800]

Very clear explanation. Thanks

[@codewithsandip]

Thanks

[@shaswatsankalp8223]

Really helpful and interactive thank you

[@codewithsandip]

Thanks

[@toddhoward5947]

TBH great work simple yet clean
Thank you ❤

[@codewithsandip]

Glad you like it!

[@shilpachauhan9178]

want this code to watch and play with it, I know it's not possible now. But,I must say you are very amazing explainer.Thank You

[@codewithsandip]

Thanks

[@syedularif2421]

Thanks a lot i have bought two udemy course to learn react but none has explained like you. finally i have understood .Thank you so much. I wish you could make some tutorial on Udemy.

[@codewithsandip]

Glad you liked it. Thanks.

[@DollarLachimi]

its really good. thanks a lot giving this.

[@codewithsandip]

Glad you like it!

[@ScienceEtConscience]

Very well explained. Thanks.

[@codewithsandip]

Thanks 🙏

[@kriskan743]

wow the most easy explained video on entire youtube!1!

[@codewithsandip]

Thanks

[@binodthakur6113]

wow what a beautiful way of explanation.

[@codewithsandip]

Thanks

[@quanominh8879]

Really great explanation. Thanks

[@codewithsandip]

Thanks

[@madannikalje760]

So neat and clean explanation ❤️👍🏻

[@codewithsandip]

Thanks

[@achyutpal3865]

It's beautifully explained, Thank you.

[@codewithsandip]

Thanks

[@dcodework2421]

Great video! thanks

[@codewithsandip]

Thanks

[@arockdurai5110]

showing the DOM updates is very clever.

[@codewithsandip]

Thanks

[@hitanshimehta430]

Amazing video!!!!

[@codewithsandip]

Thanks

[@mackynyxz]

Nice explanation about virtual DOM

[@codewithsandip]

Thanks 🙏

[@westfield90]

I’m sorry but I’m a little confused. The painting of the ui is slow part right? So if the real dom receives changes at say node 4 from the virtual dom, does it not paint node 1, 2, 3 and 4 again? I guess my confusion is when you make a change in regular JavaScript to only node 4, how is that any different if the real dom is painting node 1,2,3 and 4 again. Perhaps I’m not understanding how the painting of the ui is done by the real dom

[@codewithsandip]

Hello, the beauty of react is it doesn't render the entire element but part of it. So if you have 4 employee in a list of employees and one of the employees status got updated, react in going to render that employee node only. You can achieve the same using JS also but it would be really cumbersome. I will be working on videos where I will compare the React projects with vanilla JS projects. Please be with me till that time :)

[@binodthakur6113]

Oh man where are you ,love your way of explaning thought it there would be react js videos but no videos.You should have made it.

[@codewithsandip]

Thanks

[@anilnagula5512]

Amazing 👏..
Keep doing videos on Web Development.

[@codewithsandip]

Thanks

[@ankurnarkhede]

GOD BLESS YOU!

[@codewithsandip]

Thanks

[@h4kster182]

The best explanation ever

[@codewithsandip]

Thanks

[@prateeksaini9258]

Really Awesome Video 🤩🤩🤩

[@codewithsandip]

Thanks

[@pawe896]

Great explanation. Thank You :)

[@codewithsandip]

Thanks

[@mamunethan1356]

Love from Bangladesh

[@Todortodorov62]

thx, very nice demonstration

[@codewithsandip]

Glad you liked it. Thanks.

[@inamurrahman807]

Just amazing

[@codewithsandip]

Thanks

[@touseefahmad9794]

Please make a complete video, how single page applications works under the hood.!

[@khalidkachachi6595]

Well explained dud 👍, thank you so much 🙏

[@codewithsandip]

Thanks. I m glad you liked it.

[@Saurabhnaik]

Couldn't find your course on pluralsight
Please provide link

[@codewithsandip]

I got selected for pluralsight but getting a new course approved is really tough. You need to create unique content to get into pluralsight.

[@Saurabhnaik]

@@codewithsandip the way it was explained is very good, please keep making videos
Thanks 😀

[@attamjotsingh4474]

Beautiful explanation

[@codewithsandip]

thanks

[@RameshPMKumar]

Nice explanation Sir. One question. I read some articles, saying that Plain JavaScript re-renders the entire DOM, while react renders the changed part. But here, plain js also refreshes the minimum part only. Can anyone explain on this please.

[@codewithsandip]

I will come up with one video showing the example.

[@DanKaschel]

The advantage to react is that you don't need to write code to guarantee that the minimum change is made. Instead, the Dom is compared with the virtual Dom to do that work for you.

[@huuks527]

Great Example 👍

[@codewithsandip]

Thanks! 😃

[@vishalvibes_]

Nice explaination!

[@codewithsandip]

Thanks

[@lamargtv2572]

Superb explanation

[@codewithsandip]

Thanks

[@jatinpandey703]

clock example was very helpful.

[@codewithsandip]

Glad it was helpful!

[@hasanmirarabshahi1956]

Very good explanation

[@codewithsandip]

Glad you liked it. Thanks.

[@MithunKumar-qn9xv]

thanks sandip

[@codewithsandip]

Most welcome 🙏

[@gopinathkrm58]

very nice explaination

[@codewithsandip]

Thanks

[@youcefdeveloper8543]

It's more obvious for me know. Thank you so much buddy for the video.

[@codewithsandip]

Thanks

[@umeshnaik1235]

Good explanation.

[@codewithsandip]

Thanks

[@BabarAli-yb1eg]

IMO this is a very common mis conception regarding react that it only re renders what is changed and not the whole DOM. Since React is a library built on top of JS it does not have any additional superpower but it can work smartly.
In JS it is really easy and high performant to manipulate Objects when compared to DOM trees, React actually keeps the copy of dom in VDOM and manipulate that over the time very very quickly since it is very high performant to update objects and just map those changes and does its own batching.

[@toriolajohn3460]

Are you saying the analogy used in this video is not very accurate? If so, please kindly explain better or link to another video or blog that gives a more accurate information. Thank you

[@sarveshsakpal8241]

Amzing

[@codewithsandip]

Thanks 🙏

[@muhammadaliawan9672]

best Video

[@codewithsandip]

Thanks 🙏

[@mgccgm4341]

Thank you!

[@codewithsandip]

You're welcome!

[@saxenaabhi]

wow, this is like finding a gem of a video. good work. but please speak a bit fast. I have to watch you like on 1.5 video speed.

[@codewithsandip]

I understand your concern that's why youtube has speed feature. I have to speak slowly so that everyone can understand. These videos are made keeping everyone in mind. Thanks for the feedback.

[@prashantshekhar8404]

grt work

[@codewithsandip]

Thanks

[@atg878]

I had a doubt that why the browser itself cannot implement the diffing algorithm

[@sandip_bettereveryday]

Awesome

[@codewithsandip]

Thanks

[@realmicrobet]

+1 Great video!

[@codewithsandip]

Thanks

[@d17-h2z]

Thank you man!

[@codewithsandip]

Thanks

[@gajananambekar3194]

Nice explanation 😊

[@codewithsandip]

Thanks 🙏

[@jashanpreet832]

Great

[@codewithsandip]

Thanks

[@umeshunnikrishnan47]

Good one.

[@codewithsandip]

Thanks

[@juanhernandez2570]

perfect

[@codewithsandip]

Thanks

[@dipeshg8581]

Everybody keep saying render , render but what is rendering ?

[@dipeshg8581]

Please explain sir what is rendering in simple terms and whether print statement in normal coding language same as this rendering?

[@codewithsandip]

Hi Dipesh, we can say rendering is similar to drawing on a blank sheet of paper. So basically react is drawing into the Dom. But it doesn't sound good to say drawing. Hence this word render has been used. Btw great question I would look more into this and come back with small video possibly.

[@dipeshg8581]

@@codewithsandip thank a lot sir

[@Craftropy]

Which country you from pal?

[@codewithsandip]

India

[@abirpaul9027]

🥇🏆🏆🥇

[@touhidsayed7393]

Sir can you provide source code of js and react clock

[@codewithsandip]

My Apology. Un fortunately I don't have source code for this one now. This was i have written online just for a demo.

[@sgaonkar8893]

thank you sir

[@codewithsandip]

Your welcome.