What’s New in React 16 and Fiber Explanation

An overview of the features and updates for the highly anticipated release for React.

Trey Huffine
Aug 6, 2017 · 6 min read
Image for post
Image for post

Features

Core Algorithm Rewrite

while (!mExiting) {
NS_ProcessNextEvent(thread);
}
Image for post
Image for post
Image for post
Image for post
Stack reconciliation — updates must be completed entirely before returning to main thread (credit Lin Clark)
Image for post
Image for post
Fiber reconciliation — updates will be batched in chunks and React will manage the main thread (credit Lin Clark)
Image for post
Image for post
React priorities (credit Lin Clark)

Error Handling

Image for post
Image for post
lol wut?
Image for post
Image for post
omg that’s nice (credit Facebook)

Return multiple elements from render

render() {
return [
<li key="A">First item</li>,
<li key="B">Second item</li>,
<li key="C">Third item</li>,
];
}

Portals

render() {
// React does *not* create a new div. It renders the children into `domNode`.
// `domNode` is any valid DOM node, regardless of its location in the DOM.
return ReactDOM.createPortal(
this.props.children,
domNode,
);
}

Compatibility

Async Rendering

Browser Compatibility

global.requestAnimationFrame = function(callback) {
setTimeout(callback);
};

Component Lifecycle

Usage

# yarn
yarn add react react-dom

# npm
npm install --save react react-dom

Image for post
Image for post

Engineering Blockchain Jobs >

EdgeCoders

We write about the new and leading edge technologies with a focus on JavaScript

Trey Huffine

Written by

Founder of skilled.dev and gitconnected.com - Passionate for helping developers grow their careers. @treyhuffine

EdgeCoders

jsComplete’s Medium Publication — jsComplete is a FREE software educational library focused on JavaScript, Node, React & GraphQL. It has video courses, books, articles, and interactive lessons.

Trey Huffine

Written by

Founder of skilled.dev and gitconnected.com - Passionate for helping developers grow their careers. @treyhuffine

EdgeCoders

jsComplete’s Medium Publication — jsComplete is a FREE software educational library focused on JavaScript, Node, React & GraphQL. It has video courses, books, articles, and interactive lessons.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store