React Fragment Short Syntax Hack

Learn to use the React Fragment Short Syntax (<>), a concise and efficient way to group a list of children without adding extra nodes to the DOM.

( tag: react, tag: fragment, tag: short syntax )

In React, a common pattern is to return a list of children. However, adding a wrapper div to your result can mess up your styling or you might not want an extra node in the DOM. This is where React Fragments come in handy.

React Fragments let you group a list of children without adding extra nodes to the DOM. And the short syntax <> is a sweet syntactic sugar for <React.Fragment>. Here’s how to use it:

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

In the code snippet above, ExampleComponent is returning multiple children, ChildA, ChildB, and ChildC, without a wrapper div, thanks to the <> short syntax.

Remember, while the short syntax is handy, it does not support keys or attributes. Use <React.Fragment> when you need them.