The react team announced last week the new React version 16. The new release has new features, improvements, performance and more. Below is just a summary of What’s new on React 16.
You can read official release notes or announcement from React team. The official documentation has been updated with a new design. Meanwhile check out my react first attempt here.
So let’s get started…
What’s new on React 16
MIT licensed
So much drama last week regarding the Facebook’s licensing for React, GraphQL and other libraries. A lot of people have raised a lot of concerns over the patenting issues. The biggest reaction on license was with WordPress founder who decided to rewrite admin UI in Vue (currently in React).
http://gph.is/15AETbG
Facebook announced that React, GraphQL and Jest are relicensed in MIT. Dropping all the patents and now it’s completely open source. More details here.
Fiber
Fiber is React’s core algorithm. Basically it’s an engine that powers React. Fiber is not the API that developers interact with when building applications, which stays the same. Full rewrite allowed the core team to add support for asynchronous rendering (improved performance for large component trees), error handling and other features. More details here.
Server Side Rendering
render() method was replaced with
⬇
hydrate() specifically for server side rendering.
hydrate(<App/>, document.getElementById("root"));
Render elements outside components
React Components map directly into DOM tree. In some cases when you have elements like modals or loaders you need to find a workaround to bring them outside of the current component.
render() {
return ReactDOM.createPortal(
<div className="modal">
{this.props.children}
</div>,
document.createElement('div'));
}
React 16 portal feature allows you to attach parts of the Component tree inside a different DOM element.
Support for custom HTML attributes
Now it’s possible to pass custom HTML attributes without warnings. In addition to all standard DOM attributes, data- and aria- attributes, it’s possible to add your own.
<div beeindex="1">🐝</div>
All standard attributes still have to be camel cased. More details here.
State performance improvement
Calling setState with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render. This is useful for performance, now you can check for any event if state hasn’t been updated, set it to null and it won’t re-render the component.
getUserName = (user) => {
const newName = user.name;
this.setState(state => {
if (state.username === newName) {
return null;
} else {
return { username: newName};
}
});
};
Error Handling
Not anymore red error screen while developing React APPS.
Welcome componentDidCatch(), new lifecycle method introduced in React 16. It allows to catch and handle any JavaScript errors. It’s a declarative React version of try {} catch block. More details here.
Render arrays and strings
React 16 supports array of elements or just plain text.
No need to wrap the content, subtle change but very convenient.
const ListItems = () => (
<li>One</li>
<li>Two</li>
<li>Three</li>
);
const Text = () => ('This is just plain text')
Breaking change
Deprecated PropTypes has been removed and its a separate package, same with React.createClass and react-addons-test-utils.
Now React 16 relies on Map and Set, so make sure you still use babel for older browsers that don’t support it natively.
To sum up, React is getting better with every release and quickly is taking over the front end world.
sources: nextm – sasha – react
[alert type=white ]
React Tutorials
Build iOS App with React Native and Expo
React Native and CodePush Experience
[/alert]
If you found this article helpful, please write your feedback in the comment area below.
Follow me for more articles on React, Node.js, JavaScript, and open source software!
