[37] React Fibers / How Your App Actually Executes

In this episode we learn about the primary data structure underlying the React rendering process: React Fibers. With this knowledge we take a look at some of React’s design and how fibers impact development.

Links

• Episode Page
• Twitter Owl Creek
• Twitter Thomas Hintz
• YouTube

Resources

• https://github.com/acdlite/react-fiber-architecture
• https://blog.logrocket.com/deep-dive-into-react-fiber-internals/
• https://philippspiess.com/scheduling-in-react/
• https://programmingwithmosh.com/javascript/react-fiber/
• https://www.velotio.com/engineering-blog/react-fiber-algorithm

Show Notes

• What causes Jank? How do you get concurrency?
  • Jank is when we need to update the UI but we can’t because we’re still processing some other work
  • Breaking down “work” into small, discrete units of work
• How does React render?
  • Phase one: reconciler phase
  • Phase two: render to DOM/mobile/etc
• JavaScript execution model
  • JavaScript is single thread, no real concurrency
  • Event Queue
  • Stack frame
• React Renders
  • They can take a long time
  • Updates could potentially be batched
  • Some updates, like animations, keyboard events, should be prioritized
  • Processing an API response is less priority
• What are fibers?
  • A data-structure
  • Breaking down reconciler phase in discrete units of work run in a loop
  • Contain a priority level
  • Contain state needed to pause and resume execution
• Fibers are used to allow React to create its own scheduler
• How does this help?
  • React can control the execution model
  • Prioritizing and batching updates
  • Creating a “smooth” UX, less jank
• Things to watch for
  • If setting state based on a previous value always use the callback
  • Generally don’t need to watch for much, React has your back
• My opinion
  • It’s a clever, very inefficient, workaround for lack of proper concurrency in JS execution model
  • It means giving up control to React, good and bad...