What’s new in React 16? 

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 

What problem are we trying to solve? 

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). 

Fps demo 

Stack Reconciler 

Stack Reconciler 

Stack Reconciler In its current React walks the tree recursively and calls render functions of the whole updated tree dimplementationuring a single tick. 

How do we achieve 60fps? Scheduling Prioritizing + 

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. 

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. 

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? 

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. 

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. 

Fiber 

Fiber 

Fiber 

Fiber 

Fiber 

Fiber 

Fiber reconciliation 

Fiber reconciliation 

Fiber reconciliation 

Fiber reconciliation 

Fiber reconciliation 

Fiber reconciliation 

Fiber reconciliation 

Fiber reconciliation 

Fiber reconciliation 

Fiber reconciliation 

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. 

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? 

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. 

API for controlling Async Rendering 

No content

No content

Fragments React render() method can now return • React Elements • Arrays, Strings and numbers • null 

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. 

Portals Render children into a DOM node that exists in some other DOM hierarchy Eg. modals, tooltips etc. 

New Context API Context provides a way to pass data through the component tree without having to pass props down manually at every level. 

Lifecycle Method Deprecations 

Lifecycle methods updated 

More… • Streaming mode for SSR • React Strict mode • React Async Mode in depth • Create ref and forward ref API • React Suspense (shhh…!) 

Thank you J