The React Show React Fibers / How Your App Actually Executes
Feb 11, 2022
01:19:39
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
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...