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:
\nFragments look like empty JSX tags. They let you group a list of children without adding extra nodes to the DOM:
\nrender() {\n return (\n <>\n <ChildA />\n <ChildB />\n <ChildC />\n </>\n );\n}This exciting new feature is made possible by additions to both React and JSX.
\nA common pattern is for a component to return a list of children. Take this example HTML:
\nSome text.\n<h2>A heading</h2>\nMore text.\n<h2>Another heading</h2>\nEven 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() {\n return (\n // Extraneous div element :(\n <div>\n Some text.\n <h2>A heading</h2>\n More text.\n <h2>Another heading</h2>\n Even more text.\n </div>\n );\n}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() {\n return [\n \"Some text.\",\n <h2 key=\"heading-1\">A heading</h2>,\n \"More text.\",\n <h2 key=\"heading-2\">Another heading</h2>,\n \"Even more text.\"\n ];\n}However, this has some confusing differences from normal JSX:
\nTo 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() {\n return (\n <Fragment> Some text.\n <h2>A heading</h2>\n More text.\n <h2>Another heading</h2>\n Even more text.\n </Fragment> );\n}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:
\nconst Fragment = React.Fragment;\n\n<Fragment>\n <ChildA />\n <ChildB />\n <ChildC />\n</Fragment>\n\n// This also works\n<React.Fragment>\n <ChildA />\n <ChildB />\n <ChildC />\n</React.Fragment>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:
\nrender() {\n return (\n <> Some text.\n <h2>A heading</h2>\n More text.\n <h2>Another heading</h2>\n Even more text.\n </> );\n}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.
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) {\n return (\n <dl>\n {props.items.map(item => (\n // Without the `key`, React will fire a key warning\n <Fragment key={item.id}>\n <dt>{item.term}</dt>\n <dd>{item.description}</dd>\n </Fragment>\n ))}\n </dl>\n );\n}key is the only attribute that can be passed to Fragment. In the future, we may add support for additional attributes, such as event handlers.
You can experiment with JSX fragment syntax with this CodePen.
\nSupport for fragment syntax in JSX will vary depending on the tools you use to build your app. Please be patient as the JSX community works to adopt the new syntax. We’ve been working closely with maintainers of the most popular projects:
\nExperimental support for fragment syntax will be added to Create React App within the next few days. A stable release may take a bit longer as we await adoption by upstream projects.
\nSupport for JSX fragments is available in Babel v7.0.0-beta.31 and above! If you are already on Babel 7, simply update to the latest Babel and plugin transform:
\n# for yarn users\nyarn upgrade @babel/core @babel/plugin-transform-react-jsx\n# for npm users\nnpm update @babel/core @babel/plugin-transform-react-jsxOr if you are using the react preset:
\n# for yarn users\nyarn upgrade @babel/core @babel/preset-react\n# for npm users\nnpm update @babel/core @babel/preset-reactNote that Babel 7 is technically still in beta, but a stable release is coming soon.
\nUnfortunately, support for Babel 6.x is not available, and there are currently no plans to backport.
\nIf you are using Babel with Webpack, no additional steps are needed because babel-loader will use your peer-installed version of Babel.
\nIf you use JSX with a non-React framework like Inferno or Preact, there is a pragma option available in babel-plugin-transform-react-jsx that configures the Babel compiler to de-sugar the <></> syntax to a custom identifier.
TypeScript has full support for fragment syntax! Please upgrade to version 2.6.2. (Note that this is important even if you are already on version 2.6.1, since support was added as patch release in 2.6.2.)
\nUpgrade to the latest TypeScript with the command:
\n# for yarn users\nyarn upgrade typescript\n# for npm users\nnpm update typescriptFlow support for JSX fragments is available starting in version 0.59! Simply run
\n# for yarn users\nyarn upgrade flow-bin\n# for npm users\nnpm update flow-binto update Flow to the latest version.
\nPrettier added support for fragments in their 1.9 release.
\nJSX Fragments are supported by ESLint 3.x when it is used together with babel-eslint:
\n# for yarn users\nyarn add eslint@3.x babel-eslint@7\n# for npm users\nnpm install eslint@3.x babel-eslint@7or if you already have it, then upgrade:
\n# for yarn users\nyarn upgrade eslint@3.x babel-eslint@7\n# for npm users\nnpm update eslint@3.x babel-eslint@7Ensure you have the following line inside your .eslintrc:
"parser": "babel-eslint"That’s it!
\nNote that babel-eslint is not officially supported by ESLint. We’ll be looking into adding support for fragments to ESLint 4.x itself in the coming weeks (see issue #9662).
It may take a while for fragment syntax to be supported in your text editor. Please be patient as the community works to adopt the latest changes. In the meantime, you may see errors or inconsistent highlighting if your editor does not yet support fragment syntax. Generally, these errors can be safely ignored.
\nIf you’re a TypeScript user — great news! Editor support for JSX fragments is already available in Visual Studio 2015, Visual Studio 2017, Visual Studio Code and Sublime Text via Package Control.
\nFor other tools, please check with the corresponding documentation to check if there is support available. However, if you’re blocked by your tooling, you can always start with using the <Fragment> component and perform a codemod later to replace it with the shorthand syntax when the appropriate support is available.
React v16.2.0 is available on the npm registry.
\nTo install React 16 with Yarn, run:
\nyarn add react@^16.2.0 react-dom@^16.2.0To install React 16 with npm, run:
\nnpm install --save react@^16.2.0 react-dom@^16.2.0We also provide UMD builds of React via a CDN:
\n<script crossorigin src=\"https://unpkg.com/react@16/umd/react.production.min.js\"></script>\n<script crossorigin src=\"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js\"></script>Refer to the documentation for detailed installation instructions.
\nFragment as named export to React. (@clemmy in #10783)React.Children utilities. (@MatteoVH in #11422)onChange event in some cases. (@jquense in #11028)setState() callback firing too early when called from componentWillMount. (@accordeiro in #11507)react-reconciler/reflection with utilities useful to custom renderers. (@rivenhk in #11683)This release was made possible by our open source contributors. A big thanks to everyone who filed issues, contributed to syntax discussions, reviewed pull requests, added support for JSX fragments in third party libraries, and more!
\nSpecial thanks to the TypeScript and Flow teams, as well as the Babel maintainers, who helped make tooling support for the new syntax go seamlessly.
\nThanks to Gajus Kuizinas and other contributors who prototyped the Fragment component in open source.