isMounted is an Antipattern

isMounted is an Antipattern

Written by jatin | Published a month ago

React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature fragments:

Fragments look like empty JSX tags. They let you group a list of children without adding extra nodes to the DOM:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

This exciting new feature is made possible by additions to both React and JSX.


What Are Fragments?

A common pattern is for a component to return a list of children. Take this example HTML:

Some text.
<h2>A heading</h2>
More text.
<h2>Another heading</h2>
Even more text.

Prior to version 16, the only way to achieve this in React was by wrapping the children in an extra element, usually a div or span:

render() {
  return (
    // Extraneous div element :(
    <div>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </div>
  );
}

To address this limitation, React 16.0 added support for returning an array of elements from a component’s render method. Instead of wrapping the children in a DOM element, you can put them into an array:

render() {
 return [
  "Some text.",
  <h2 key="heading-1">A heading</h2>,
  "More text.",
  <h2 key="heading-2">Another heading</h2>,
  "Even more text."
 ];
}

However, this has some confusing differences from normal JSX:

  • Children in an array must be separated by commas.
  • Children in an array must have a key to prevent React’s key warning.
  • Strings must be wrapped in quotes.

To provide a more consistent authoring experience for fragments, React now provides a first-class Fragment component that can be used in place of arrays.

render() {
  return (
    <Fragment>      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </Fragment>  );
}

You can use <Fragment /> the same way you’d use any other element, without changing the way you write JSX. No commas, no keys, no quotes.

The Fragment component is available on the main React object:

const Fragment = React.Fragment;

<Fragment>
  <ChildA />
  <ChildB />
  <ChildC />
</Fragment>

// This also works
<React.Fragment>
  <ChildA />
  <ChildB />
  <ChildC />
</React.Fragment>


JSX Fragment Syntax

Fragments are a common pattern in our codebases at Facebook. We anticipate they’ll be widely adopted by other teams, too. To make the authoring experience as convenient as possible, we’re adding syntactical support for fragments to JSX:

render() {
  return (
    <>      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </>  );
}

In React, this desugars to a <React.Fragment/> element, as in the example from the previous section. (Non-React frameworks that use JSX may compile to something different.)

Fragment syntax in JSX was inspired by prior art such as the XMLList() <></> constructor in E4X. Using a pair of empty tags is meant to represent the idea it won’t add an actual element to the DOM.


Keyed Fragments

Note that the <></> syntax does not accept attributes, including keys.

If you need a keyed fragment, you can use <Fragment /> directly. A use case for this is mapping a collection to an array of fragments — for example, to create a description list:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}


RELATED BLOGS