How React Works behind the scenes - Pluralsight audition

sandip gautam 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

[@user-ck6yl6qb2g]

I agree

[@PurpleCJ]

This video is the definition of Crystal Clear!

[@codewithsandip]

Thanks 🙏

[@markotweyo]

This is the best explanation about React on KZbin.

[@codewithsandip]

Thanks. Glad you liked it.

[@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

[@prasada2874]

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

[@codewithsandip]

Thanks

[@9716664106]

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

[@codewithsandip]

Thanks

[@kpcPrasad]

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

[@codewithsandip]

Thanks

[@rakibulhashan5446]

The Easiest example and explanation I have ever seen!!

[@codewithsandip]

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.

[@aravindvenkata8475]

REALLY SO BRILLIANT AND SOOOOO INFORMATIVE

[@codewithsandip]

Thanks

[@anshshrivastava9107]

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

[@codewithsandip]

Thanks

[@shubhajithalder2054]

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

[@codewithsandip]

Glad it helped. Thanks.

[@rajjasoliya9147]

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

[@codewithsandip]

Thanks

[@sambritpradhan9735]

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

[@codewithsandip]

Glad u liked it. Thanks.

[@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!

[@rahulsyt_]

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

[@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.

[@user-kh5ux5cy6q]

Nice video! Thank you for the thorough explanation.

[@eyasuberg2717]

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

[@codewithsandip]

Thanks

[@missinglink2416]

The clearest explanation!!!!!

[@codewithsandip]

Thanks

[@nayeemahmed5169]

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

[@codewithsandip]

Thanks.

[@anassaifi7613]

Bestest explanation on KZbin

[@codewithsandip]

Glad you think so!

[@magik7395]

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

[@codewithsandip]

Glad it was helpful!

[@toddhoward5947]

TBH great work simple yet clean Thank you ❤

[@codewithsandip]

Glad you like it!

[@RodneyKimbangu]

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

[@codewithsandip]

Thanks

[@emmanuelmonlenyode83]

A million thanks for this explanation

[@codewithsandip]

Glad it was helpful!

[@ayushikarn1893]

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

[@codewithsandip]

Thanks

[@hitanshimehta430]

Amazing video!!!!

[@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.

[@jahajbalal8502]

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

[@codewithsandip]

Thanks

[@user-ck6yl6qb2g]

Great video!

[@codewithsandip]

Thanks 🙏

[@nikunjsoni123]

Thanks for wonderful explanation of React! Very nice video!

[@codewithsandip]

Thanks

[@dcodework2421]

Great video! thanks

[@codewithsandip]

Thanks

[@inamurrahman807]

Just amazing

[@codewithsandip]

Thanks

[@muhammadtalhabaig1725]

Thank you brother for such a good explanation!

[@codewithsandip]

Thanks 🙏

[@mgccgm4341]

Thank you!

[@codewithsandip]

You're welcome!

[@MithunKumar-qn9xv]

thanks sandip

[@codewithsandip]

Most welcome 🙏

[@ankurnarkhede]

GOD BLESS YOU!

[@codewithsandip]

Thanks

[@murageshnad2420]

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

[@codewithsandip]

Glad it helped

[@kiransaravade5127]

crystal clear explanation !! thanx

[@codewithsandip]

Thanks

[@kimerared]

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

[@codewithsandip]

Thanks

[@pateldhairyadhairya51]

Thank you man!

[@codewithsandip]

Thanks

[@quanominh8879]

Really great explanation. Thanks

[@codewithsandip]

Thanks

[@h4kster182]

The best explanation ever

[@codewithsandip]

Thanks

[@subhashgn1775]

Thank you, your explanations were very clear.

[@codewithsandip]

Thanks

[@vinobhamanoharan5068]

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

[@codewithsandip]

Thanks

[@DollarLachimi]

its really good. thanks a lot giving this.

[@codewithsandip]

Glad you like it!

[@huuks527]

Great Example 👍

[@codewithsandip]

Thanks! 😃

[@prateeksaini9258]

Really Awesome Video 🤩🤩🤩

[@codewithsandip]

Thanks

[@achyutpal3865]

It's beautifully explained, Thank you.

[@codewithsandip]

Thanks

[@shaswatsankalp8223]

Really helpful and interactive thank you

[@codewithsandip]

Thanks

[@orhanors1800]

Very clear explanation. Thanks

[@codewithsandip]

Thanks

[@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

[@attamjotsingh4474]

Beautiful explanation

[@codewithsandip]

thanks

[@billchen4923]

Awesome video, you really explain Virtual Dom crytical clear.

[@codewithsandip]

Glad it was helpful!

[@kriskan743]

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

[@codewithsandip]

Thanks

[@pawe896]

Great explanation. Thank You :)

[@codewithsandip]

Thanks

[@madannikalje760]

So neat and clean explanation ❤️👍🏻

[@codewithsandip]

Thanks

[@vishalvibes_]

Nice explaination!

[@codewithsandip]

Thanks

[@realmicrobet]

+1 Great video!

[@codewithsandip]

Thanks

[@binodthakur6113]

wow what a beautiful way of explanation.

[@codewithsandip]

Thanks

[@mamunethan1356]

Love from Bangladesh

[@Todortodorov62]

thx, very nice demonstration

[@codewithsandip]

Glad you liked it. Thanks.

[@ScienceEtConscience]

Very well explained. Thanks.

[@codewithsandip]

Thanks 🙏

[@muhammadaliawan9672]

best Video

[@codewithsandip]

Thanks 🙏

[@prashantshekhar8404]

grt work

[@codewithsandip]

Thanks

[@lamargtv2572]

Superb explanation

[@codewithsandip]

Thanks

[@umeshnaik1235]

Good explanation.

[@codewithsandip]

Thanks

[@hasanmirarabshahi1956]

Very good explanation

[@codewithsandip]

Glad you liked it. Thanks.

[@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.

[@sarveshsakpal8241]

Amzing

[@codewithsandip]

Thanks 🙏

[@juanhernandez2570]

perfect

[@codewithsandip]

Thanks

[@khalidkachachi6595]

Well explained dud 👍, thank you so much 🙏

[@codewithsandip]

Thanks. I m glad you liked it.

[@gopinathkrm58]

very nice explaination

[@codewithsandip]

Thanks

[@sandip_bettereveryday]

Awesome

[@codewithsandip]

Thanks

[@gajananambekar3194]

Nice explanation 😊

[@codewithsandip]

Thanks 🙏

[@sgaonkar8893]

thank you sir

[@codewithsandip]

Your welcome.

[@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

[@mackynyxz]

Nice explanation about virtual DOM

[@codewithsandip]

Thanks 🙏

[@arockdurai5110]

showing the DOM updates is very clever.

[@codewithsandip]

Thanks

[@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

[@umeshunnikrishnan47]

Good one.

[@codewithsandip]

Thanks

[@jashanpreet832]

Great

[@codewithsandip]

Thanks

[@jatinpandey703]

clock example was very helpful.

[@codewithsandip]

Glad it was helpful!

[@youcefdeveloper8543]

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

[@codewithsandip]

Thanks

[@touseefahmad9794]

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

[@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.

[@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 :)

[@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 😀

[@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.

[@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

[@abirpaul9027]

🥇🏆🏆🥇

[@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.

[@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

[@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.

[@inganzamarumpu]

now it's really clean, but it seems like jQuery do the same

[@codewithsandip]

Thanks

[@DanKaschel]

No. Not even a little bit.