When to use <React.fragment /> vs <>

In a previous post I reviewed when you should use a fragment instead of a standard HTML element when building React applications. In this post I want to review when you should use the longhand <React.Fragment> instead of the shorthand version <>.

  1. Use <React.Fragment> for when you need to map over a collection of fragments.
function Listicle(props) {
  const {items} = props

  return (
      {items.map(item => (
        <React.Fragment key={item.id}>
  1. Use the shorthand <> any other time.