What's new in React 16

Talk I gave at WalmartLabs on how React 16 works, new features and React Fiber

Transcript

1. What’s new in React 16?
2. React 16 Complete rewrite of it’s core algorithm Incremental Rendering React Fiber Supports better animations, layout & gestures Fully backward compatible Pause, resume, abort, reuse work Prioritization Async
3. What problem are we trying to solve?
4. What happens in a frame? • Evaluating JavaScript • Calculating styles • Laying out elements • Painting the actual pixels • Most screens refresh 60 times per second (60fps), • This window represents the time to get a single frame to the screen (Professor Math says 1000 ÷ 60 = ~16ms).
5. Fps demo
6. Stack Reconciler
7. Stack Reconciler
8. Stack Reconciler In its current React walks the tree recursively and calls render functions of the whole updated tree dimplementationuring a single tick.
9. How do we achieve 60fps? Scheduling Prioritizing +
10. Scheduling Specifically, being be able to 1. Pause work and come back to it later. 2. Assign priority to different types of work. 3. reuse previously completed work. 4. abort work if it's no longer needed. In order to do any of this, we first need a way to break work down into units. In one sense, that's what a fiber is. A fiber represents a unit of work.
11. Prioritizing React takes control of our work and assigns priorities • User events (clicks, input change) • External data subscriptions (redux) • Animations (transitions/gestures) • Updates to offscreen content.
12. Goal 1. Interrupt the current, lower priority work. 2. Complete the high priority work. 3. Resume the interrupted work where it left off. But, how do you interrupt a function call in JavaScript?
13. Let’s come up with a plan Here’s one way to do this • Interrupt current rendering call stack • "Stash" the call stack off to the side • Perform some higher priority work, which has its own call stack • Go back to the original call stack and resume. This is essentially what React Fiber does. Fiber can switch between limitless number of call stack. It's a reimplementation of the stack, specialized for React components.
14. Fiber A fiber is just a JS object – a virtual stack frame. Information from the stack is preserved in memory on the heap. Hence, they can be manipulated and run whenever they want. Fiber contains information about a component, its input and output.
15. Fiber
16. Fiber
17. Fiber
18. Fiber
19. Fiber
20. Fiber
21. Fiber reconciliation
22. Fiber reconciliation
23. Fiber reconciliation
24. Fiber reconciliation
25. Fiber reconciliation
26. Fiber reconciliation
27. Fiber reconciliation
28. Fiber reconciliation
29. Fiber reconciliation
30. Fiber reconciliation
31. Stack vs Fiber reconciliation Stack reconciliation Updates must be completed entirely before returning to main thread. Fiber reconciliation Updates will be batched in chunks and React will manage the thread.
32. Async Rendering A key benefit of async rendering is that large updates don't block the main thread - instead, the work is spread out and performed during idle periods using cooperative scheduling. But once you make something async, you introduce the possibility that things may appear on the screen at separate times. How does React solve this?
33. Phased Rendering You can think of React rendering as being split into two main phases: • The render phase, where we compare the new tree with the existing tree and calculate the changes that need to be made. This phase is free of side-effects, so it can be done asynchronously. The work can also be interrupted, rebased, restarted, and interleaved with other updates. • the commit phase, where the changes computed during the render phase are flushed to the screen. This phase is typically very fast and is performed synchronously to avoid inconsistencies.
34. API for controlling Async Rendering
37. Fragments React render() method can now return • React Elements • Arrays, Strings and numbers • null
38. Error Boundaries Are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the crashed component tree.
39. Portals Render children into a DOM node that exists in some other DOM hierarchy Eg. modals, tooltips etc.
40. New Context API Context provides a way to pass data through the component tree without having to pass props down manually at every level.
41. Lifecycle Method Deprecations
42. Lifecycle methods updated
43. More… • Streaming mode for SSR • React Strict mode • React Async Mode in depth • Create ref and forward ref API • React Suspense (shhh…!)
44. Thank you J