What's new in React 16.2

The major improvement in React v16.2 is the way we implement Fragments. In React v16.0 we can return multiple elements/components from a react component as an array.

render() {
  return [
    <ChildComponent1 (or) Element1 key="1">,
    <ChildComponent2 (or) Element1 key="2">,
    <ChildComponent3 (or) Element1 key="3">,
  ];
}

This syntax causes causes some confusion when we return combinations of strings and components, strings should be enclosed in quotes, components should not be. Each element/component should end with a comma. Each component in the array should have an unique key.

To overcome these complexities in the Fragment syntax React v16.2 introduces a new <Fragment> component, which can be used to enclose all the elements/components without the need for the quotes, commas and keys as follows.

render() {
  return (
    <Fragment>
      My string 1.
      <ChildComponent1/>
      <h2>My Tag</h2>
      My string 2.
      <ChildComponent2/>
    </Fragment>
  );
}