React Native what exactly is the <> (empty) component

Question

In React Native you can encapsulate a set of components in one single <View> (or similar) component. You can also encapsulate a set of components as <> and </>. What are these? Do they just translate to an base View? It's probably not a good practice but it doesn't give a warning and it doesn't crash.

Answer 1

It's the React shortcut for Fragment component.

You can write like this :

import React, { Component } from 'react'

class Component extends Component {
  render() {
    return <> <ComponentA/> <ComponentB/> </>
  }
}

Or without the shortcut and import Fragment component

import React, { Component, Fragment } from 'react'

class Component extends Component {
  render() {
    return <Fragment> <ComponentA/> <ComponentB/> </Fragment>
  }
}

You have to know, you can't use any key or prop with the shortcut syntax.

Here's the official documentation

I hope it helps !

Answer 2

In addition to what He has said, it is used to embed many HTMLElements that you don't what them to be nested into a <div> for example.

For example, you may have this use cases

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

For more explanation you can read this React Official Documentation Fragment