Are you giving the proper sense to React.Fragment?
Tags: react, webdev, javascript
Published: 2021-04-24 16:16:08

> _**UPDATE:** Title has been changed because of the misunderstanding around it and the content. I hope this change will cover the expectations and keep healthy conversations to make us keep growing as developers, coders, and professionals in the end._

In my experience, more than 15 years of coding, programming, architecting, I've found people implementing code with **no rules or standards** and, sometimes, people believing they follow some rules but, in reality, they are not applying by themselves. I was in that situation a lot of times and keep being sometimes as well. I've written this article to show what I think is a **good practice** and makes us being **good professionals**.

**The issue**

The following *React* code renders a list of items in case of the array passed has them.

```React
function List(props) {  
  const items = props.items;
  
  return <ul>
    {items && items.map(i => <li key={i}>{i}</li>)}
  </ul>;
}

function App() {
	const collection = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
	return <List items={collection} />;
}

ReactDOM.render(App(), document.getElementById('app'));
```

Do you think there is something wrong with the code? This code works perfectly fine, it creates a `li` node with the number as the value. 

What happens if the array has no items in it? The `ul` node **will be rendered** as well but there won't be any `li` node and **no items in there**. This is not a big issue but something not completely well. 

We can modify the code in this way:

```React
function List(props) {  
  const items = props.items;
  
  // *** notice how the code is modified and complex increases
  return items && 
    	<ul>
        { items.map(i => <li key={i}>{i}</li>) }
      </ul>;
}

function App() {
	const collection = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
	return <List items={collection} />;
}

ReactDOM.render(App(), document.getElementById('app'));
```

Like the previous case, this code is working fine, it does what it is supposed to do. 

So, let me ask the same question as before, what happens if the array has no items in it? 

In this case, a `false` value and no HTML node are returned. The issue here is that we return **different kinds of items** depending on the `items` property passed.

Why is this an issue? In fact, this is just a **concept issue** more than a coding issue. Returning the same kind of item in this function will make it easier for testing, make it easier to maintain, make it easier to read because it will be **consistent** and other methods calling this one will receive exactly what they expect and won't have the necessity to check if retrieves a boolean or a component.

The next code modification must have in mind this premise so it'll be like the following:

```React
function List(props) {  
  const items = props.items;
  
  // check if items is not empty
  const isEmpty = !(items && items.length > 0);
  
  // always return a React component
  return isEmpty
    ? <React.Fragment />
    : (<ul>
        { items.map(i => <li key={i}>{i}</li>) }
      </ul>);
}

function App() {
	const collection = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
	return <List items={collection} />;
}

ReactDOM.render(App(), document.getElementById('app'));
```

It seems that our code makes more sense now, doesn't it? We always return a component for any of the options or paths our code takes. If items is not empty, a `ul` node is returned plus a `li` node per item inside, a React component in fact. 

If there is no items, a `React.Fragment` component is returned. Both of them are **React components**, no need for callers to check it.

As a **professional programmers** that we are, we must _give meaning and name our objects_. 

You may noticed we have few objects here in our code, an **empty list** component, an **item list** component, an **item** component and a **manager** component. Each of them with a **unique responsibility** (following the _Single Responsibility_ principle that I'll talk in a future article) and a simple code easy to understand, to maintain and to test.

```React
function ListItem(props) {
	return <li>{props.value}</li>;
}

function ItemList(props) {  
  const items = props.items;
  
  return <ul>
    { items.map(i => <ListItem key={i} value={i} />) }
  </ul>;
}

// As suggested by Andy Nicholson
const EmptyList = () => <React.Fragment />;

function ListManager(props) {
	const items = props.items;
  
  const isEmpty = items && items.length <= 0;
  
  return isEmpty 
  	? <EmptyList />
  	: <ItemList items={items} />;
}

function App() {
	const collection = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
	return <ListManager items={collection} />;
}

ReactDOM.render(App(), document.getElementById('app'));
```

I think this code looks like much better than the first one. Reviewers'll see the person behind the code thought how to face the problem, the constraints, and the paths to take around of it.

**Wrapping up**

As I wrote some paragraphs above, **professional programmers** must give meaning to the code. Coding can be done by anyone, programming in a good way with sense are just a subject of professionals. 

_What do you think about the exercise made in this article? 
Hope this can be useful to you or just have fun reading it._