ReactJs under the hood

Advanced concepts (internal)

This is a video where Dan Abramov implements a new feature in reactjs live. The new feature is a tag named lol and also a strip one to get rid of all divs.

https://www.youtube.com/watch?v=aS41Y_eyNrU

  • reactjs has a complex code base
    • packages has a source folder
    • each package has its own responsibility
    • no restriction where to put tests -> for this screen cast it was under reactjs DOM
    • test first
      • writing a test for squashing divs
      • easy way
        • for div without styles prefer fragments
      • hard way
        • react keeps its internal tree called Fiber tree
        • react steps into each Fiber until it has no children to walk(start) into and then flushes things to DOM(commit)
        • ReactWorkTags = all possible Fiber types
        • Fibers are reused
        • copy of initial fiber is done 16+
        • reconcile
          • begin (ReactFiberBeginWork)
          • complete (ReactFiberCompleteWork)
          • commit (ReactFiberCommitWork)

Resources

Made with 💖 by @MatheusMarabesi