Why return multiple elements in React is not allowed?

Question

it can only return only one element tag in render.
In v16, we can render multiple elements by using an array.
so why cannot straightly write mutiple element tags in React?

render(){
  return(
    <div />
    <div />
  )
}

I mean that why cannot render multiple elements but not how to render mutiple elements.

Answer 1

React implementation relies on constructing a tree like structure which it uses to for reconcilation. When you return multiple elements from React elements from the render method, the assumtion that the tree will have one root node for the Component will not longer hold, hence making it difficult to process reconcilation algorithm.

Thus react gives you a limitation to provide a root node. If you return an array of elements from v16 onwards, react will internally create a dummy node as the parent.

From version 16.2 onwards React provides a React.Fragment component, that provides a cleaner syntax to return multiple elements

render(){
  return(
    <React.Fragment>
       <div />
       <div />
    </React.Fragment>
  )
}