Here we are discussing new features added to new Reactjs 16 which was released at the end of 2017. There are cool and awesome stuff to discussed. Everything you may need to know will be listed below.
1. Add new Render types called fragments and strings
In render method you can now return array of elements and strings. As earlier no need to wrap them in parent element. See below examples.
//Returning array of elements
render() {
// No need to wrap list items in an extra element!
return [
// Don't forget the keys :)
<li key="A">First item</li>,
<li key="B">Second item</li>,
<li key="C">Third item</li>,
];
}
//Returning String
render() {
return 'look at me. No parent element around me';
}
2. Better error handling
If you familiar with react 15 and earlier versions you may have experience that if there is runtime error in a component whole react app fails to work. With react 16 this was fixed by unmounting only the error component instead of whole app.
3. First-class way to render children into a DOM
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
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,
);
}
4. Better server-side rendering
React 16 includes a completely rewritten server renderer. It’s really fast. It supports streaming, so you can start sending bytes to the client faster.
5. Unknown HTML attributes will remain
In previous versions we can’t add invalid html attributes to html tags. In React 16 unknown html attributes will remain as it is.
6. Reduced file size
React 16 is actually smaller compared to react 15
7. Removed libraries from React 16 that was in React 15
Some packages included in React 15 was remove from react 16
– React.createClass is now available as create-react-class,
– React.PropTypes as prop-types
– React.DOM as react-dom-factories