The Evolution of Multi-Component Rendering in React: From Arrays to Fragments

In React development, developers frequently encounter situations where multiple components need to be rendered simultaneously. Early versions of React imposed strict limitations on this, but as the framework evolved, the React team introduced increasingly flexible solutions. This article systematically presents the evolution of these solutions, helping developers understand the appropriate use cases and best practices for each method.

Limitations in Early React Versions

Prior to React 16, JSX syntax required adjacent JSX elements to be wrapped within a parent element. Attempting to render multiple components directly, as shown in the following code, would result in a compilation error:

import React from 'react';
import PanelA from './panelA.jsx';
import PanelB from './panelB.jsx';

React.render(
  <PanelA />
  <PanelB />,
  document.body
);

Developers would encounter the error: Adjacent JSX elements must be wrapped in an enclosing tag. This occurred because JSX transformation requires a single root node to construct the virtual DOM tree. The solution at the time was to use a wrapper element, such as <div>:

React.render(
  <div>
    <PanelA />
    <PanelB />
  </div>,
  document.body
);

While straightforward, this approach introduced unnecessary DOM nodes, potentially affecting CSS styling and layout structures.

Array Rendering in React 16

React 16 introduced a significant enhancement: components could return arrays of elements. This allowed developers to directly return arrays of multiple elements within a component's render method:

render() {
  return [
    <li key="one">First item</li>,
    <li key="two">Second item</li>,
    <li key="three">Third item</li>,
    <li key="four">Fourth item</li>,
  ];
}

The key requirement for this method is providing a unique key attribute for each element in the array. React uses key to identify which elements have changed, enabling efficient DOM updates. The advantage of array rendering is the avoidance of extra wrapper elements, though it comes with limitations such as difficulty in conditional rendering and relatively verbose syntax.

Fragment Feature in React 16.2

React 16.2 introduced Fragments, offering a more elegant solution for multi-component rendering. Fragments allow developers to group multiple children without adding extra nodes to the DOM. There are two usage patterns:

// Full syntax
render() {
  return (
    <React.Fragment>
      <td>Hello</td>
      <td>World</td>
    </React.Fragment>
  );
}

// Short syntax (requires Babel 7+ support)
render() {
  return (
    <>
      <td>Hello</td>
      <td>World</td>
    </>
  );
}

The primary advantages of Fragments include:

• No additional DOM nodes, preserving layout purity
• Support for conditional rendering and loop structures
• Syntax closer to traditional JSX patterns
• No need to set key for each child (unless the Fragment itself is in a list)

Special Considerations for ReactDOM.render

It is important to note that the array and Fragment rendering methods described above are primarily applicable within a component's render method. For top-level ReactDOM.render calls, React still requires a root element because it needs to mount the entire application to a DOM node. Therefore, developers should wrap multiple components within a root component and then render this root component via ReactDOM.render.

Analysis of Practical Use Cases

In practical development, the choice of multi-component rendering method depends on specific requirements:

1. Simple Layout Scenarios: If only a few components need to be displayed side-by-side and extra DOM nodes are not a concern, using a wrapper <div> is the simplest approach.
2. List Rendering Scenarios: When dynamically generating lists, array rendering with key attributes is the most suitable choice, especially when list items require independent updates.
3. Complex Component Structures: For components requiring conditional rendering or complex logic, Fragments offer maximum flexibility while avoiding unnecessary DOM pollution.
4. Table or List Items: Fragments are particularly useful when rendering table rows or list items, as <tr> or <li> elements cannot be directly wrapped in <div>.

Performance and Best Practices

From a performance perspective, Fragments are generally the optimal choice because they do not add extra DOM nodes, reducing the rendering burden on the browser. While array rendering also avoids additional DOM nodes, it requires setting key for each element, which may introduce slight performance overhead in large lists.

Best practice recommendations:

• Prefer Fragments, especially in React 16.2 and above
• If array rendering is necessary, ensure stable and unique key values for each element
• Avoid directly rendering multiple components in top-level ReactDOM.render
• Consider using tools like Babel and Webpack to ensure syntax compatibility

The evolution of multi-component rendering in React reflects the framework's commitment to usability and practicality. From initial strict limitations to current flexible options, developers can choose the most suitable approach based on specific needs. As React continues to evolve, further optimizations and improvements may emerge, but the current array and Fragment solutions already address the vast majority of application scenarios effectively.