Reactjs 15 Vs 16 – Complete Lookup

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

Add a Comment

Your email address will not be published. Required fields are marked *