How React ACTUALLY works (DEEP DIVE 2023)

Are you already working with the JavaScript framework React? Or do you want to learn it? No matter how much experience you have, this video will teach you how React work in detail! Some of the topics include, what is React, how can it be used in existing projects, how does reactivity work, how does React keep the UI in sync with the data and more.
If you found this video helpful,
please give it a like 👍 and subscribe 📨 for more.
🐦 Follow me on Twitter
/ 0xandriy
⏰ Timestamps
0:00 Intro - What is React and what is it not?
0:50 How to add React to (most basic way)
2:24 React in combination with other tools
3:21 What is JSX?
5:17 Downside of JSX
6:00 How React updates the DOM
6:10 Updating the DOM - 1. Trigger
8:33 Updating the DOM - 2. Render
9:11 Updating the DOM - 3. Commit
9:35 Why do we need the Virtual DOM?
10:31 React diffing algorithm
12:18 State persistence
📎 Helpful links
React Docs: react.dev/
🎵 Where I get my music from
Epidemic Sound: www.epidemicsound.com/referra...
🤝 Services I use
NordVPN - go.nordvpn.net/SH4vc
🎥 My gear
Monitor - Dell S3423DWC 34
amzn.to/3XcAXuR
Headphones - AKG K240 Studio
amzn.to/3J7vAZJ
Earbuds - Jabra Elite 4 Active
amzn.to/3Hm4k8M
Mic - HyperX SoloCast
amzn.to/3QLS6tg
Keyboard - Apple Magic Keyboard
amzn.to/3GDz9UO
Trackpad - Apple Magic Trackpad
amzn.to/3CQAq9P
Camera - Sony a6400
amzn.to/3w4d7Wf
Lens 1 - Sony 16-50mm f/3.5-5.6
amzn.to/3iDSk99
Lens 2 - Sony - FE 50mm F1.8 Standard Lens
amzn.to/3GHFheU
Lens 3 - Samyang SY12M-E-BK 12mm F2.0
amzn.to/3WclDgM
📬 Inquiries (Collabs, Sponsorships etc.)
[e-mail]

[@frontstartdev]

Found this helpful? You can buy me a coffee ☕ bmc.link/frontstart

[@Dev-cc3ni]

Well done content. Keep it up!

[@frontstartdev]

@@Dev-cc3niThanks!

[@prashanthkumar0]

​@@Dev-cc3ni part 2

[@markzuckerbread1865]

Amazing video, I've been using react for a while but now I feel like I understand it a lot better, subbed and looking forward for the next vid!

[@frontstartdev]

@@markzuckerbread1865 Glad to hear that!

[@user-kc7kj6vr1u]

This was amazing! WE NEED THAT PART 2 (Context, error boundaries, etc) !!!! Thanks so much for spreading your knowledge

[@MyBrainForYou]

We need part 2 pleaassss

[@tomasburian6550]

Massively

[@abuna002]

Excellent overview. Thank you. I would definitely enjoy a part 2.

[@anotherone2398]

wow , this is quality content right here , in my experience learning react, diving deep into details , you discover bad practices and stop them

[@TheRobBrennanLive]

This was awesome! What a fun way to convey fundamental React concepts. Nicely done, m'man

[@user-wo8hq4eq3b]

Excellent video! I'd love to see a part 2.

[@lostempire12]

Really great video man need more like this 👍

[@CrusaderMen]

Thank you this is awesome! I'm looking forward for part 2

[@reynali]

This was something I've been wondering about for a bit and really useful knowledge, thank you!

[@rjtutz]

This is genuinely quality content! Thank you so much!

[@rahuls331]

Quality content man! Really loved the entire video. Looking forward for more content from you.

[@klmovchan]

Such a cool video. The best one I saw for particular topic, ty

[@MedAmin944]

Great video my friend , hope there will be a PART2

[@witchmorrow]

This was such a useful and clear explanation, thank you!

[@deepawali]

Great in depth video bro🤯

[@lukas.webdev]

Great video, very helpful! Thanks for sharing. Keep it up! 😉🔥

[@developer_01]

Please make part 2.... this is just sooo good

[@kashmeu]

Such a concise video yet simple video covering some core and complex topics.

[@osamahaldoaiss]

Great video, will send it to my junior devs. Understanding these concepts helps with the most common runtime bugs when using React. Well done 🎉

[@rotemmia]

great video! waiting for part 2

[@Bruno_Corso]

Fantastic video dude! The key part is so didatic! Now makes much more sense why VsCode asks always for insert key on the list! Thanks a lot 🤘🏻

[@youssefhassan9002]

Thank you this was helpful! ❤

[@typehint]

Fantastic tutorial - thank you!

[@abdelazizlaissaoui9079]

well this is a great video thanks maan keep it up

[@danielfirebanks4973]

Damn, rooting for a part 2!

[@lairespereira5163]

Amazing 🙌🏼

[@bwprado]

Very good, we need a part 2.

[@ludanjubara]

Great explanation. Part 2 please 🙏

[@bilalmajeed2834]

Best Explanation i found about React till date. Thanks Man ❤❤

[@filipedavila4366]

Great video! Part 2, please!

[@sachintharuka6154]

I found ur channel when I was searching for Material Ui, and then found this video, great content ❤

[@paperC_CSGO]

Instant subscriber. Please make more in depth (but short) videos like these! Webpack, Vite would be nice, and browser stuff

[@codation]

Excellent video! Good brush up for experienced React programmers and a must for junior devs. Helps to understand how React works under the hood. Pls make a Part 2 covering Hooks, RSC, Suspense, Actions, etc.

[@mohammedothman8292]

Great! Thanks a lot for your effort.

[@cscs6587]

That's amazing man just Continue

[@faizanahmed9304]

Part 2 please, great explanation

[@nextleveltech267]

Really informative video. Everything explained nicely. Thanks a lot...

[@uscjake868]

Awesome dude. Please continue. I like the visual explanations as that is what I needed. For newer programmers who are just scratching the surface of how JS destructuring works, react looks like absolute spagetti.

[@Riuk08]

Agreed... Even after watching it twice I feel dumb that I didn't get *all* of it

[@tomasburian6550]

This is such a fantastic video that I watched it several times in the row. You can use React without it but it helps massively with debugging and writing good code.

[@54peace]

The Goat of react concepts explained videos!! 10/10

[@user-bb9nl5ch6s]

Great Video!

[@gregkavanagh1094]

Part 2 please. Thanks for part 1

[@rutvikjr8251]

Hi, It was really helpful. Realized many mistakes that I was making while developing. Sorry not able to buy you a coffee right now but surely will do it in the future. Thanks. Waiting for part 2.

[@frontstartdev]

Glad you found it helpful 😁

[@cameronblackwoodcode]

Excellent content here - perfect balance between great information and remaining concise - whilst I'm already an experienced front end developer, this was still a super helpful video. Looking forward to checking out more of your videos.

[@frontstartdev]

Thanks! Glad to hear that!

[@josemoreno1209]

Great video man!! Saludos desde chile :)

[@aakashbiswas3942]

a much needed refresher material In a world of tutorial hell

[@developingNerd]

I came from your reddit post and my god you have absolutely nailed the core concepts of react. I say, for react learners, this video is a must watch. And yes, make a part 2!

[@frontstartdev]

Thanks! Part 2 is coming soon so stayed tuned.

[@MyBrainForYou]

@@frontstartdev I came back again to check if part 2 has come or not 😢

[@gopalg8239]

Good one part 2 please

[@Ramesh-js]

Part 2 Waiting Bro !

[@AWaterKnight]

4:45 you can also return an array.

[@jorimsoika9115]

Top erklärt! Wo hast du dir diesen Deep-Dive angeeignet? Kannst du Bücher/docs oder sonstiges empfehlen?

[@frontstartdev]

Danke! Ich habe hauptsächlich die offiziellen React docs benutzt. Kann ich nur empfehlen!

[@frankdearr2772]

great topic, thanks

[@mitotv6376]

Nice vid

[@nayem6386]

Good One 👌

[@curiosabouttech]

Great explanation thanks

[@user-pd2ic5pd3z]

Yes, I wanna see part 2

[@gizemavcs8599]

Perfect video!!!!!

[@yousfhamad70]

Great content

[@kkjj8509]

Part 2 please ❤

[@chinzorigyou]

Awesome video. Could you please make part2?

[@akshatkhandelwal5591]

part 2 needed pls

[@patrickren7395]

Great video. One topic I'd appreciate you to touch on is where state is actually stored in a FC. Every state change causes the whole component function to re-run, I'm wondering why the second time the `useState` func runs, the state won't be initialized again. My guesss is the state is stored in a store managed by react & `useState` somehow `hooks` the FC with the actual state.

[@yohannestakata6021]

usestate has closure over state variable

[@chennasreenu4723]

We need Part 2.

[@ra6160]

We need part 2😁😁

[@vinoths5753]

We need those topics also

[@AmeerHamza-fz1ve]

Excellent video

[@harshithpatte7169]

We need part 2

[@maximkatik]

Great video, but I believe even React team refuses Virtual DOM term and use React Element tree. Plus would be great to hear about Fiber Trees (Current and WorkInProgress) as well.

[@stilltrippin4687]

You are the goat

[@aj.arunkumar]

very good one..

[@minor12828]

What if you are using all libraries together ? Is it a framework, then ?

[@arunjoseph8466]

please make that part 2

[@Wakkyguy]

Is the reconciler a part of React or ReactDOM?

[@muhafizahmed9964]

Part 2 please

[@mohamedhesham9192]

great video

[@NiKo-lh2nq]

thank you

[@devgurjar3728]

PART 2 !!!!!!!!!!

[@youdontknowme2508]

This video counts for a sub ofcourse. Make more such content. Awesome quality content

[@theghost9362]

Brilliant

[@nhatlinhpham4235]

Part 2 plz

[@miladsa96]

Please record its part two

[@Franco24024]

Holy shit this is so good

[@el_andrius]

Why is the complexity n^3?

[@yolololo6120]

part 2 please

[@thuannguyenlehoa9711]

In short, behind the scence the way ReactJS works is just 3 steps: trigger -> render -> commit, right?

[@muhammedashkar692]

bro, where you inspired by fireship style?😄

[@anujbhagat2105]

9:43 what da mouse doin?????

[@7Budyn7]

It's 2023 so I think it's important: how does it connect with fiber? ;)

[@ashish_prajapati_tr]

Helping you to break KZbin algorithm.

[@md.abuabdullah2446]

4:19 was that intentional?

[@gge6021]

create react app is noz recommended

[@sarasverma7951]

great

[@uchennaofoma4624]

Just seeing this amazing video now. I really loved how you brole down the vonvepts syarting from showing us react and babel from a CDN to actually using thr tools we currently employ (vitr amd the likes). It really makes me appreciate the work they do under the hood

[@2xdialloo]

👌

[@UniParse]

I give you 5 starts🌟🌟🌟🌟🌟, next video please!!

[@hmls3579]

5:42 wtf

[@abdulrahmantahir3033]

part 2 part 2part 2 part 2 ///////

[@ismasoc5]

why are explanations about React made so difficult to understand?

[@eudrino]

This is outdated, non-vdom libraries such as Solid can be much faster than vdom ones.

[@frontstartdev]

In the comparison I was referring to updating the DOM by yourself (not using a framework). But in the annotation at the bottom I mention that Solid and Svelte are not slow.

[@eudrino]

@@frontstartdev i dont think your point was clear there, nice video though.

[@frontstartdev]

@@eudrino I see, my bad. Thanks for the feedback tho!