The Heart of React || How React works under the hood

Sdílet
Vložit
  • čas přidán 6. 06. 2024
  • React is the magic box for most developers. But as we know, magic does not exist in our world. And today I’m going to open this box and explain in simple words how React builds a virtual tree, how it updates it, and at the same time we always see our cherished 60 frames per second.
    React Reconciliation - reactjs.org/docs/reconciliati...
    React Fiber Architecture - github.com/acdlite/react-fibe...
    ReactNext 2016 "What is React Fiber?" - • Andrew Clark: What's N...
    Heuristic (computer science) - en.wikipedia.org/wiki/Heurist...)
    List of priorities - github.com/facebook/react/blo...
    List of priority timeouts - github.com/facebook/react/blo...
    Unstable exports - github.com/facebook/react/blo...
    Support AI Bruise:
    Patreon - / membership
    Timecodes:
    00:00 - Topic announcement
    00:41 - Information sources
    00:59 - Reconciliation short definition
    01:11 - How react works under the hood
    02:33 - React DOM and RN rendering
    02:50 - Tree traversing algorithm
    04:21 - Type changing real example
    07:13 - Prioritization flow
    08:25 - Prioritization realization in GitHub
    09:25 - React Fiber intro
    10:05 - Conclusion
    Subscribe to channel: / @ai-bruise
    #react #webdevelopment #programming #frontend #reactjs

Komentáře • 14

  • @Sourabh-qf8wy
    @Sourabh-qf8wy Před 4 měsíci +7

    I haven't even learnt React, but as a Computer Science Student I somewhat understood what you were talking about. Really nice video , liked it, watched till the end.
    Subscriber 1+

    • @ai-bruise
      @ai-bruise  Před 4 měsíci +2

      Great! Thank you for joining! mb it is a time to start learn react :)

  • @palashbaderia7113
    @palashbaderia7113 Před 4 měsíci +2

    This is toooooo good man !!!! Would love to see more content :)

    • @ai-bruise
      @ai-bruise  Před 4 měsíci +1

      Thank you! I have a lot of content. I'm going to publish a new video on Tuesday ;-)

  • @hackytech7494
    @hackytech7494 Před 3 měsíci +1

    Thank you so much, Read so many docs but couldn't get hold of the react fiber, and finally its clear from your video. Thank you so much ❤. Please keep uploading Indepth knowledge of languages like this, I have subscribed and will be waiting for such amazing videos.

    • @ai-bruise
      @ai-bruise  Před 3 měsíci +1

      Great! I have a lot of what I can share with you. So just subscribe to the channel and share the video with your friends! It will increase my motivation to create new episodes!

    • @hackytech7494
      @hackytech7494 Před 3 měsíci

      @@ai-bruise Already Subscribed 😁. Looking forward to vidoes which explain the concepts in complete depth, like the javascript execution and how it uses memory and stack etc. Great work. keep up the good work.

  • @MaxWilliam
    @MaxWilliam Před měsícem

    You just got a new subscriber. What a great content we have here!

    • @ai-bruise
      @ai-bruise  Před měsícem

      Welcome to the channel! I will be glad if you share our episodes with your colleagues!

  • @4v4
    @4v4 Před 11 dny

    Cool! I found it useful, but the code snippets that used classes felt outdated.

  • @islombekdev
    @islombekdev Před 4 měsíci

    is it English version of the channel "Ayti Sinyak"?

    • @ai-bruise
      @ai-bruise  Před 4 měsíci +2

      Yes, it is. I have the same channel in other language with 30k subscribers. So I've decided to share knowledge for more people in different countries in EN :)

    • @islombekdev
      @islombekdev Před 4 měsíci +1

      @@ai-bruise Dude, you can't imagine how grateful I am now. Cause I really liked the content on your Russian channel but Russian is not good, I was struggling to understand some concepts. Keep it up, mate! I will try to help with like, subscription, sharing and so on))

    • @ai-bruise
      @ai-bruise  Před 4 měsíci +4

      I'm really happy to hear it! Now we have big plans to publish a lot of videos in EN channel. All best content from RU channel will be posted here as well! thank you for supporting!