Is a React.Fragment the same as a DocumentFragment?

Question

React.Fragment looks like DocumentFragment. But does React.Fragment has the same performance benefits like DocumentFragment?

In other words, are this

// index.jsx

const arr = [...Array.from({length: 10000})];

return (
  <ul>
    <>
      {arr.map((x, i) => <li>{i}</li>)}
    </>
  </ul>
)

and this

// index.js

const arr = [...Array.from({length: 10000})];
const fragment = new DocumentFragment();

for(let i = 0; i < arr.length; ++i) {
  const li = document.createElement('li');
  
  li.textContent = i;
  fragment.append(li);
}

document.querySelector('ul').append(fragment)

the same?

Or I still should use DocumentFragment for large data like below?

//index.jsx

const arr = [...Array.from({length: 10000})];
const fragment = new DocumentFragment();

for(let i = 0; i < arr.length; ++i) {
  const li = document.createElement('li');
  
  li.textContent = i;
  fragment.append(li);
}

return (
  <ul>
    {fragment}
  </ul>
)

React fragment is used when you want to return more than one element from a component. I doubt it has any performance benefits — Konrad, Apr 06 '23 at 22:44
React uses a virtual DOM, and React.Fragment is designed for it. DocumentFragment is part of the real DOM. When you re-render, React tries to use virtual DOM diffing to minimize the number of real DOM operations needed to update the output. So there's probably only a fraction of real DOM nodes to be changed. But if you create a different DocumentFragment each time, you basically will throw away all the old nodes (that you appended in the previous render) and append the new ones. — qrsngky, Apr 07 '23 at 01:06

score 1 · Answer 1 · answered Apr 07 '23 at 01:51

But does React.Fragment has the same performance benefits like DocumentFragment

They have a comparable purpose in two not comparable worlds and therefore the implications are different.

The React Fragment in your first example will impact the performance negatively. Barely measurable, but still. That is because it is an additional node in the node tree that React has to deal with, but without adding any value whatsoever to the code.

Adding keys to the items in your list has a way bigger impact on performance.

In other words, are this ... and this ... the same?

Your two examples are barely comparable. The major work in React is not creating and mounting the elements, it is updating them every time something triggers a render. And that means first determining which Elements need to be updated.

Or I still should use DocumentFragment for large data like below?

this code snippet is nonsensical and will just crash. A JSX Element and a DOM Node are two completely different things. Like apples and oil paintings.

I didn't write `keys` because I'm not asking about rerender of components but you are completely right that I should use them. But they give only rerender performance but I need the inserting performance so I tried to combine them. Can you please provide correct code how to add large data to page with the benefits of `DocumentFragment`? — EzioMercer, Apr 07 '23 at 02:34

score 0 · Answer 2 · answered Apr 07 '23 at 00:43

Interesting question, I'm pretty sure React.Fragment is not implemented through DocumentFragment, because my guts feeling there's no such need.

React.Fragment is simply added to make sure we can do

<>
  <div>
</>

But in case we want to specify the element type, we can use React.Fragment. I'm sure you already know what it does, it's a wrapper that allow you to wrap around a group of elements without adding the physical wrapper element to the DOM. That's the only purpose for React.Fragment. It has no performance tuning at all.

Is a React.Fragment the same as a DocumentFragment?

2 Answers2