JSX

htmlFor

for

labelFor

forId

<>Something</>

import * as React from 'react';

... 

<React.Fragment>Something</React.Fragment>

import { Fragment } from 'react';

... 

<Fragment>Something</Fragment>

<frag>Something</frag>

React Fragments are faster and the DOM is less cluttered

Fragments are more customizable

Fragments provide better code readability

Fragments provide a way to implement less overall dom markup which increases render performance and takes less memory overhead

{
  list.map(listItem => 
    <key={listItem.id}>
      {listItem.label}
    </>
  )
}

import * as React from 'react';

... 

{
  list.map(listItem => 
    <React.Fragment key={listItem.id}>
      {listItem.label}
    </React.Fragment>
  )
}

import { Fragment } from 'react';

... 

{
  list.map(listItem => 
    <Fragment key={listItem.id}>
      {listItem.label}
    </Fragment>
  )
}