How Does React Actually Work? React.js Deep Dive #1

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 มิ.ย. 2024
  • Have you ever wondered, how does React actually work? In this video, we will explore what is really happening behind the scenes. First, we will learn about React elements, components and component instances. Then, we will move to React Reconciliation along with the Diffing algorithm, which is the very core of React. Afterwards, we will move to rendering and to the renderers themselves, looking specifically at React DOM. Finally, we will learn about the ways React communicates with the renderers.
    Timestamps:
    0:00 Introduction
    0:35 React components, elements and component instances
    5:34 Reconciliation
    7:11 The Diffing algorithm
    11:00 Rendering
    12:23 How React communicates with the renderers
    14:12 Ending
    Notes:
    Check what is happening behind the scenes: babeljs.io/repl
    The $$typeof property: overreacted.io/why-do-react-e...
    Create your own renderer: reactjs.org/docs/test-rendere...
    Social Media:
    ►Twitter: / philip_fabianek
    ►LinkedIn: / philip-fabianek
    ►Website: www.philipfabianek.com
    ►GitHub: github.com/philipfabianek
    Music:
    Lodhi by Pali Gap / pali_gap​
    Creative Commons - Attribution 3.0 Unported - CC BY 3.0
    Free Download / Stream: bit.ly/lodhi-pali-gap​
    Music promoted by Audio Library • Lodhi - Pali Gap (No C... ​
    Lights Of Elysium - AERØHEAD / aerohead​
    Creative Commons - Attribution-ShareAlike 3.0 Unported - CC BY-SA 3.0
    Free Download / Stream: bit.ly/lights-of-elysium​
    Music promoted by Audio Library • Lights Of Elysium - AE...
    Solace by Nomyn / nomyn​
    Creative Commons - Attribution 3.0 Unported - CC BY 3.0
    Free Download / Stream: bit.ly/SolaceNomyn​
    Music promoted by Audio Library • Solace - Nomyn (No Cop... ​
    #ReactJS #ReactDeepDive
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 252

  • @TheZayzoo
    @TheZayzoo ปีที่แล้ว +38

    This video made me realize that I'm standing on the shoulders of giants whenever I'm developing in React. Facebook devs are magicians

  • @ffking1357b
    @ffking1357b 2 ปีที่แล้ว +119

    Great content! I think this is the only video available in youtube that talks about the React principle and at the same time is friendly to beginners. Keep up the good work. The video serves really well for people who wanna dive into the source code of React while have no idea where to start.

  • @StatisticsTheory
    @StatisticsTheory 7 หลายเดือนก่อน +2

    Finally! I've been looking for this series for the past week. Great stuff Philip 😁

  • @Aliena92
    @Aliena92 ปีที่แล้ว +2

    I wasn't expecting the background music. Probably the first coding tutorial with music. Worked like magic. Thank you :)

  • @tylermyers8735
    @tylermyers8735 ปีที่แล้ว +3

    10/10. So well done can't wait to watch the rest of this series, bravo.

  • @bradleyli1569
    @bradleyli1569 9 หลายเดือนก่อน +1

    This youtuber definitely deserves more subscribers! Awesome content! Looking forward to seeing more coming out!

  • @szymonrojek6480
    @szymonrojek6480 ปีที่แล้ว +3

    Amazing content - I can see more clearly what is going on with renders and generally better understand the reconciliation process. Thank you 🙏

  • @ajeeteppakayala6788
    @ajeeteppakayala6788 2 ปีที่แล้ว +4

    One of the best videos for those who want to dive deep into the React and the source code.

  • @prathameshkhetre1494
    @prathameshkhetre1494 5 หลายเดือนก่อน +1

    crisp and clear, loved the explanation!

  • @GauravYadav-rv7wx
    @GauravYadav-rv7wx 2 ปีที่แล้ว +3

    This is gold stuff, I believe it not available any where.
    Please bring more videos like this

  • @webb-developer
    @webb-developer ปีที่แล้ว +1

    the most accurate video i've watched on this topic so far , good job

  • @christianolsson8644
    @christianolsson8644 9 หลายเดือนก่อน +4

    I have worked as a React developer for four years and I never understood why you have to import React and neither why you can't use the index as a key. Very good and clear explanations. I will have an interview for a React job on monday and this definitely helps me! Thank you! 😃

  • @deepeshnair
    @deepeshnair 9 หลายเดือนก่อน +1

    This is amazing ❤. This is the only video I’ve seen which has explained this on a practical level

  • @chrisschuller7055
    @chrisschuller7055 2 ปีที่แล้ว +1

    The best video I have found about this topic on TH-cam!! Great work! 😁

  • @0xmorfu
    @0xmorfu 2 ปีที่แล้ว +1

    Big thanks man. Exactly the understanding I was looking for. Really well done.

  • @ramshankarkumar4222
    @ramshankarkumar4222 2 ปีที่แล้ว +1

    This is amazing !!!!! Thank you so much man. This really helped me clearing so many doubts related to react.

  • @uuu06222
    @uuu06222 ปีที่แล้ว +1

    This is amazing, I checked lots of times if I have already pressed like during watching this, thank you!

  • @hichamelkamouni9910
    @hichamelkamouni9910 ปีที่แล้ว +1

    actully this one of the greatest videos about react. thanks for this amazing content , can't wait to see more.

  • @zb2747
    @zb2747 ปีที่แล้ว +2

    Nice brief high-level overview of the source code and core deep fundamentals

  • @EBay_Dev
    @EBay_Dev 2 ปีที่แล้ว +1

    This type of quality and depth is hard to find easily and for free. Thank you for your understanding and great explanation.
    the much deeper dive, the better
    thanks

  • @SumanPokhrel0
    @SumanPokhrel0 หลายเดือนก่อน +1

    What an elegantly explained video. Bravo

  • @netcomputers6529
    @netcomputers6529 ปีที่แล้ว +1

    great content...even watching this single tutorial, learned much more than reading articles online...

  • @dx.dhafer
    @dx.dhafer 2 ปีที่แล้ว +2

    Incredible content, I daresay this was never explained better! Thank you 🙏🏽

  • @kevinfreeman9652
    @kevinfreeman9652 2 ปีที่แล้ว +11

    Philip this was awesome. I have been an educator for over 15 years and love watching others present information. Your use of the calming background music, imagery, and the pace of your voice definitely put my mind in a place to absorb the content easily. Please continue to bring us more information. Instantly subscribed!!!

    • @PhilipFabianek
      @PhilipFabianek  2 ปีที่แล้ว

      Thank you!

    • @lilithfirefly3727
      @lilithfirefly3727 ปีที่แล้ว

      It's so smooth I just replayed the video to check the music 😅

  • @billchen4923
    @billchen4923 2 ปีที่แล้ว +1

    Super awesome & fantastic lessons, rarely encounter such a deep dive React tutorial on TH-cam.

  • @hansschenker
    @hansschenker 2 ปีที่แล้ว +1

    Thank's a lot for this React deep dive - I myself would not have been able to dive so deep into react!

  • @19jnz08
    @19jnz08 ปีที่แล้ว +2

    I've switched from Angular to React. This video is very helpful. Thank you for sharing your knowledge ;)

  • @user-ki9ru5kf8s
    @user-ki9ru5kf8s ปีที่แล้ว +1

    awesome! This is the best React video I have ever seen

  • @lilithfirefly3727
    @lilithfirefly3727 ปีที่แล้ว +1

    Great work. Thank you for the detailed explanation 💜

  • @sanjeettiwari9000
    @sanjeettiwari9000 2 ปีที่แล้ว +1

    It was really very insightful. Learned a lot in those 15 minutes. Thanks for that Philip.

  • @zahidshaikh3122
    @zahidshaikh3122 4 หลายเดือนก่อน +2

    Before this, I was working BLINDLY on React and any other library or framework that is out their. This very content opened my EYES 👀.

  • @mehmetturgutgezgin6439
    @mehmetturgutgezgin6439 2 ปีที่แล้ว +2

    I've never seen such an informative video about React before. Thank you very much for presenting such a video to us.

    • @PhilipFabianek
      @PhilipFabianek  2 ปีที่แล้ว

      Thank you for watching, glad it was helpful 🙂

  • @hashim_hahsimli_95
    @hashim_hahsimli_95 ปีที่แล้ว +1

    Great video Philip! Thanks!

  • @k303k
    @k303k ปีที่แล้ว +2

    Your channel is a work of art.I'm new to your channel.I've been learning Reactjs for about like 4 months and i was looking for like how React works behind the scenes .Your channel is a masterpiece.Thank you so much.Can we expect like Nextjs series Deep dive series if you have times sir?Thank you....

  • @timjobs9072
    @timjobs9072 2 ปีที่แล้ว +1

    omg, much of information in the video killed confusions, really helped a lot.❤❤❤

  • @zhenghongjiang5862
    @zhenghongjiang5862 2 ปีที่แล้ว +1

    Best content! clear and concise, I've never seen. thanks for your sharing!

  • @pq6688
    @pq6688 2 ปีที่แล้ว +3

    Brilliant content. World-class content. Keep it up Philip, it's amazing.

  • @naturalguardian5885
    @naturalguardian5885 5 หลายเดือนก่อน +2

    Awsome work ! keep going this !

  • @hariharan3469
    @hariharan3469 ปีที่แล้ว +1

    Loving this DEFFING ALGORITHM. Thanks mate

  • @mrwick2op
    @mrwick2op 6 หลายเดือนก่อน +1

    Great video , thanks brother it helped alot to understand react better.

  • @aaadesh
    @aaadesh ปีที่แล้ว +1

    Thanks for such a great content Philip!🖖

  • @saulnewbury4631
    @saulnewbury4631 2 ปีที่แล้ว +1

    This is friggin' awesome! Thank you.

  • @VovanFraer
    @VovanFraer ปีที่แล้ว +1

    Indeed, it was the best video on this topic, take my gratitude, sir!

  • @StryKhymorodnyk
    @StryKhymorodnyk ปีที่แล้ว +3

    It is the greatest explanation I have seen! I say it, as I have just kind of ended self-learning JavaScript and was wondering about React.js's hard-mode. It is good that you show it like that, because when I have seen the other's 'let's create-react-app' and so on, I just felt as if I forgot all I knew!
    I have to switch, due to war. Even my 2 diplomas are just for fun. That is where English and German are useful.
    Thank you, Philip! My best friend lives in Prague since 2008. He helps me in learning, but I couldn't have understood React, even with his help! You have helped! Great

  • @wxq521
    @wxq521 2 ปีที่แล้ว +3

    This is so great. The explain is very simple and clear. Thanks author, you make my days much easier and saved my time.

  • @andreigatej6704
    @andreigatej6704 3 ปีที่แล้ว +1

    Very interesting and helpful, thank you! Keep up the good work!

  • @nguyentruong1812
    @nguyentruong1812 ปีที่แล้ว

    Thank you Philip, you cleared a lot of my confusions :))

  • @DiaryOfMuhib
    @DiaryOfMuhib ปีที่แล้ว +1

    Awesome. Keep up the good work

  • @nextleveltech267
    @nextleveltech267 4 หลายเดือนก่อน +2

    Thank you... Really informative 👍

  • @nneddenn6207
    @nneddenn6207 2 ปีที่แล้ว +1

    Excellent explanation! Very clear & structrured!

  • @samggez
    @samggez 9 หลายเดือนก่อน +1

    Pure GOLD! subscribed!

  • @Serzes_
    @Serzes_ ปีที่แล้ว +1

    Thank you for your videos, those information are not easy to find on TH-cam because in general people explain only how to use things without explaining it

  • @captainalpha4853
    @captainalpha4853 2 ปีที่แล้ว +1

    Very informative, please keep making videos like this. Cheers man

  • @ngocthile1001
    @ngocthile1001 ปีที่แล้ว +1

    great explanation. Thanks so much

  • @Dipenparmar12
    @Dipenparmar12 ปีที่แล้ว +2

    One of the best insights of react internals (even I couldn't found this kind of info in paid course's as well), amazing work Philip Thank you so much for such a great series.

    • @PhilipFabianek
      @PhilipFabianek  ปีที่แล้ว +4

      Thank you! I am actually considering making a course (~ 10 hours) that would focus exclusively on React internals

    • @lilithfirefly3727
      @lilithfirefly3727 ปีที่แล้ว +1

      @@PhilipFabianek That sounds great. I'm waiting for the updates about the course

    • @devendrapandey4557
      @devendrapandey4557 ปีที่แล้ว

      @@PhilipFabianek Hey Philip , Any updates on the course . I will be the first to purchase ..Your teaching style is awesome !

  • @zGrowthLabs
    @zGrowthLabs 4 หลายเดือนก่อน +1

    incredible explanation!

  • @VladimirJovana
    @VladimirJovana ปีที่แล้ว +1

    15 mins of pure beauty, thanks a lot

  • @jonasoo7113
    @jonasoo7113 9 หลายเดือนก่อน +1

    Wow this is god sent..... Best video on this subject❤❤

  • @MrAdityaSingal
    @MrAdityaSingal 6 หลายเดือนก่อน +1

    Awesome content!!

  • @user-fg6ng7ej6w
    @user-fg6ng7ej6w ปีที่แล้ว +1

    great series on internals. please keep showing us react guts

  • @IsraelAgyemanPrempeh
    @IsraelAgyemanPrempeh ปีที่แล้ว +1

    Amazing content, you explained it properly with amazing brevity and clarity. I am interested in the internals of redux or any state management say useReducer/useContext

  • @eegaramesh3093
    @eegaramesh3093 3 ปีที่แล้ว +1

    Your video's are really helpful, I am searching for the video's of this kind.keep videos of this kind.really informative

  • @MrRobot-mb6rq
    @MrRobot-mb6rq ปีที่แล้ว +2

    This video deserves million views.

  • @umairqamar2672
    @umairqamar2672 ปีที่แล้ว +1

    premium level content bro !

  • @omarpervez5657
    @omarpervez5657 4 หลายเดือนก่อน +1

    Have to say bunch of words about this video but not have much time to do it. You did a great job that I can't explain. Keep it up your great work. Have subscribed your Channel 👍

  • @DemystifyFrontend
    @DemystifyFrontend 5 หลายเดือนก่อน +1

    This is really awesome content .

  • @zoltancaputo9562
    @zoltancaputo9562 ปีที่แล้ว +1

    Amazing! Tks for share.

  • @harshitadhingra225
    @harshitadhingra225 2 ปีที่แล้ว +2

    The Best 'React Under the Hood' explanation!!

  • @LyczeQQ
    @LyczeQQ ปีที่แล้ว +1

    Man, thank you so much for this video. I finally understand React

  • @ramanpreetsingh186
    @ramanpreetsingh186 3 หลายเดือนก่อน +1

    great explanation!!!!

  • @diegazo5556
    @diegazo5556 2 ปีที่แล้ว +1

    Great Job! Awesome explanation!

  • @gowriramasamy674
    @gowriramasamy674 2 ปีที่แล้ว

    Thank you for this video.its clearly explained about react basics.

  • @satyamchatterjee1074
    @satyamchatterjee1074 ปีที่แล้ว +1

    Bro, why didn't I see you earlier ? Why TH-cam isn't showing more of your content in suggestions ?
    This content is lit, complete lit.
    Thank you man for this awesome content.

  • @danieldesales377
    @danieldesales377 2 หลายเดือนก่อน +1

    Great content!

  • @1minuteunity759
    @1minuteunity759 16 วันที่ผ่านมา +2

    Great Video!

  • @bjornstabell2970
    @bjornstabell2970 2 ปีที่แล้ว +2

    Great video series! Very much needed :) One thing I'd love to understand a bit better is component instances. What is the relationship between elements and instances? Where does React keep its references to the component instances? In the element tree somewhere? The 'ref'?

    • @PhilipFabianek
      @PhilipFabianek  2 ปีที่แล้ว +1

      The relationship between React elements (the ones that have the function type which returns the nested elements) and instances is 1-to-1. For each element that describes a component, there exists a component instance.
      About the second question: Instances exist in memory. We as React developers can access class instances using the 'this' keyword or lifecycle methods. This works because an instance of a class component is an actual instance of the class afterall. We can access functional component instances using React hooks. We can also create refs.
      What you are asking is how does React access them or how are they stored internally. The answer is that this is 1 level below what we are talking about. It has a lot to do with React Fiber, which I covered in the next episode of this deep dive (th-cam.com/video/0ympFIwQFJw/w-d-xo.html). Fibers keep actual references to component instances in the 'stateNode' property. I think this answer on Stack Overflow is what you are looking for: stackoverflow.com/a/58968770/8699608 The function in the answer can retrieve the component instance from the actual element in the DOM.

  • @nghiatranthanh3806
    @nghiatranthanh3806 2 ปีที่แล้ว +1

    Great video! Thank you

  • @mykolao
    @mykolao ปีที่แล้ว +1

    This is pure gold

  • @illyapelypenko3190
    @illyapelypenko3190 ปีที่แล้ว +1

    Man you rock. So cool explanation!

  • @chans9055
    @chans9055 ปีที่แล้ว +1

    Thank you for the amazing video, now I have a better understanding of React

  • @kiefer8101
    @kiefer8101 ปีที่แล้ว +1

    Subscribed!
    More React internals content please!!

  • @vatsee
    @vatsee 2 ปีที่แล้ว +1

    Thanks. Very useful content!

  • @mohammadnoushadsiddiqui4786
    @mohammadnoushadsiddiqui4786 2 ปีที่แล้ว +1

    WOW AMAZING , This video is full of tons of knowledge. Thank you so much sir.

  • @AleySoundz
    @AleySoundz 6 หลายเดือนก่อน +1

    Thank you for this video it was very helpful.

  • @bushbuddyplatypus
    @bushbuddyplatypus 10 หลายเดือนก่อน +1

    Fantastic, and great music

  • @user-tq6uz9dc3y
    @user-tq6uz9dc3y 10 วันที่ผ่านมา +1

    awsome video thanx from south korea!!

  • @sumitbhutani5606
    @sumitbhutani5606 3 ปีที่แล้ว +1

    Great video!! Super helpful.

  • @meetpatel8751
    @meetpatel8751 8 หลายเดือนก่อน +1

    Nice video !!! 👏

  • @flatulenzedellamente
    @flatulenzedellamente 2 ปีที่แล้ว +1

    thank you! we need to understand how does react really work in order to use it properly!!

  • @frankdearr2772
    @frankdearr2772 2 หลายเดือนก่อน +1

    great topic, thanks

  • @AjithKumarsham
    @AjithKumarsham 2 ปีที่แล้ว +1

    Great video, thanks man!

  • @mathewvarkey5102
    @mathewvarkey5102 2 ปีที่แล้ว +1

    Best I've seen yet!. I have a slight confusion at 10:58 is that "reconciliation" or "diffing" ? I was of the impression that react does the diffing, and reactDom does the reconciliation part.

    • @PhilipFabianek
      @PhilipFabianek  2 ปีที่แล้ว

      Diffing is part of reconciliation. Check out reactjs.org/docs/reconciliation.html

  • @trannhathao3978
    @trannhathao3978 2 ปีที่แล้ว +1

    Thank you, now I can understand more about react

  • @ananditvashist1778
    @ananditvashist1778 ปีที่แล้ว +1

    Hey Philip, your whole series on React is great! Now I can actually understand what's happening behind the scenes...Just a question: would you mind sharing how do you create these videos-Do you do screen recording of a presentation? I am planning to make dev tutorial myself and it would be really helpful. Cheers!

    • @PhilipFabianek
      @PhilipFabianek  ปีที่แล้ว +2

      Thank you! I produce my videos in Premiere Pro, where I add texts, images, icons and animate them to make everything look nice.

    • @ananditvashist1778
      @ananditvashist1778 ปีที่แล้ว +1

      @@PhilipFabianek Thank you!

  • @deep_swamp
    @deep_swamp 2 ปีที่แล้ว +2

    Awesome explanation with one caveat at 7:30. The diffing algorithm has a complexity of _O(n)_ which does *not* mean that the number operations will be smaller than (n). Instead it means that the number of operations will be (

  • @muhammadbilalmalik7292
    @muhammadbilalmalik7292 2 ปีที่แล้ว +1

    Your videos are like oxygen to us'🧡🧡

  • @marcframe7449
    @marcframe7449 2 ปีที่แล้ว +2

    great video! I love the 3blue1brown kinda style applied to programming.

    • @PhilipFabianek
      @PhilipFabianek  2 ปีที่แล้ว +1

      Thank you very much! I have watched quite a few videos from 3b1b and they had an impact on me.

  • @RankMotion
    @RankMotion ปีที่แล้ว +1

    Your ability to simplify and communicate knowledge is extraordinary!
    Could you tell me what tools you use to produce these videos?
    Thanks a lot

    • @PhilipFabianek
      @PhilipFabianek  ปีที่แล้ว

      Thank you! I use Premiere Pro for video and audio editing, optionally Adobe Audition for other audio changes.

  • @shalin1
    @shalin1 5 หลายเดือนก่อน +1

    Great Video

  • @adeshgangwar3555
    @adeshgangwar3555 2 ปีที่แล้ว +1

    very insightful and knowledgeable video