React Fragment vs Null

Sometimes we use React Fragment and return null confusingly. Let's see the difference between the two.

Fragment#

A Fragment is a component that you use to render your component. They don't create any unnecessary DOM elements when rendering a component. Fragments do not produce any output in HTML and can be used to group elements together without affecting the DOM structure.

1function ListComponent({ items }) {
2  return (
3    <>
4      {items.map((item) => (
5        <li key={item.id}>{item.name}</li>
6      ))}
7    </>
8  );
9}

For example, when rendering a list component like the one above, you may want to render only the list items. You can use Fragments to render just the list items without creating unnecessary DOM elements.

return null#

When a component returns null, it means it doesn't want to render anything. React will skip rendering this component and any children it may have. This can be useful when you want to conditionally render a component based on certain state or props.

1function ListComponent({ items }) {
2  if (items.length === 0) {
3    return null;
4  }
5
6  return (
7    <>
8      {items.map((item) => (
9        <li key={item.id}>{item.name}</li>
10      ))}
11    </>
12  );
13}

When rendering a list component like the one above, sometimes you don't want to render anything when there are no list items. This can be accomplished by using return null.

Summary#

• return null: when it's really empty, and you don't want to render anything.
• <></>: when you want to render a bunch of elements together without any additional HTML elements.