The Future of React with Fiber

Transcript

1. The Future of React with Fiber Sidhartha Chatterjee me@sidharthachatterjee.com
2. Introduction • React is awesome • New reconciliation algorithm, Fiber is now in beta • Async Scheduling • Powerful new primitives
3. ReactDOM
4. ReactDOMFiber
5. Breathe
6. Why Fiber? • Reconciliation of non-vital elements is costly • Especially with things like animations • Prioritize work and speed up the overall frame rate
7. What is a Fiber? • A virtual stack frame • Pausable / Prioritizable / Memoizable / Abortable • A unit of “work"
8. Fiber Relationships
9. Fiber Prioritization ReactPriorityLevel { NoWork: 0, SynchronousPriority: 1, AnimationPriority: 2, HighPriority: 3, LowPriority: 4, OffscreenPriority: 5, }; // No work is pending. // For controlled text inputs. Synchronous side-effects. // Needs to complete before the next frame. // Interaction that needs to complete pretty soon to feel responsive. // Data fetching, or result from updating stores. // Won't be visible but do the work in case it becomes visible.
10. requestIdleCallback --- working asynchronously using requestIdleCallback ------------------------------------------------- | ------- Fiber --------------- ------- Fiber --------------- ------ Fiber --------------- | | | beginWork -> completeWork | -> | beginWork -> completeWork | -> | beginWork -> completeWork | ... | ↓↓↓ ----------------------------------------------------------------------- | commitAllWork(flush side effects computed in the above to the host) | -----------------------------------------------------------------------
11. React Fiber call tree
12. Quirks • componentWillUpdate may be called multiple times before componentDidUpdate • No frame guarantee of when an update will occur
13. Benefits • Smoother animations/scrolling • Smoother user interactions • Streamable server rendering?
14. Try React Fiber • Use ReactDOM.unstable_deferredUpdates • npm i -S react@next react-dom@next
15. Fin Sidhartha Chatterjee me@sidharthachatterjee.com