<p><a href="http://www.youtube.com/watch?v=gbONLMqrUxI"><img src="http://img.youtube.com/vi/gbONLMqrUxI/0.jpg" alt="React Fragments - What, Why, How"></a></p>
<p>React Fragments were introduced in React 16.2.0. Even though they have been around for a while now, many React developers I have talked to haven't started to use them yet and the number one reason for this usually is that they have heard of them but haven't got around to learn about them.</p>
<p>So what are they and should you start using them? The answer to the latter is YES and the answer for the first question is what this blog post is going to tell you.</p>
<p><em>Are you new to React? Be sure to read my post</em> <a href="/blog/6-things-every-beginner-react-developer-should-know/"><em>6 Things Every Beginner React Developer Should Know</em></a><em>.</em></p>
<h2>Problem</h2>
<p>As the React.js docs state, a common pattern in React is for components to return multiple elements. Usually these elements are wrapped for example inside a div. In most cases the wrapper div is "irrelevant" and is only added because React components require you to return only one element. This kind of behaviour results in useless markup and sometimes even invalid HTML to be rendered, which is bad.</p>
<p>For example we could have a component <code>Table</code> that renders an HTML table and inside that table the columns are rendered with another component called <code>Columns</code>. It would probably look something like this.</p>
<pre><code class="language-jsx">class Table extends React.Component {
  render() {
    return (
      &#x3C;table>
        &#x3C;tr>
          &#x3C;Columns />
        &#x3C;/tr>
      &#x3C;/table>
    );
  }
}

class Columns extends React.Component {
  render() {
    return (
      &#x3C;div>
        &#x3C;td>Hello&#x3C;/td>
        &#x3C;td>World&#x3C;/td>
      &#x3C;/div>
    );
  }
}
</code></pre>
<p>This would result in an invalid HTML to be rendered because the wrapper div from <code>Columns</code> component is rendered inside the <code>&#x3C;tr></code>.</p>
<pre><code class="language-jsx">&#x3C;table>
  &#x3C;tr>
    &#x3C;div>
      &#x3C;td>Hello&#x3C;/td>
      &#x3C;td>World&#x3C;/td>
    &#x3C;/div>
  &#x3C;/tr>
&#x3C;/table>
</code></pre>
<h2>Solution</h2>
<p>Solution for this is, you guessed it, fragments! React fragments let you group a list of children without adding extra nodes to the DOM because fragments are not rendered to the DOM. So basically we use React.Fragment where we would normally use a wrapper div.</p>
<p>We can make use of fragments with <code>&#x3C;React.Fragments></code> syntax. So we could write the <code>Columns</code> component as follows.</p>
<pre><code class="language-jsx">class Columns extends React.Component {
  render() {
    return (
      &#x3C;React.Fragment>
        &#x3C;td>Hello&#x3C;/td>
        &#x3C;td>World&#x3C;/td>
      &#x3C;/React.Fragment>
    );
  }
}
</code></pre>
<p>Now the Table component would render following HTML.</p>
<pre><code class="language-jsx">&#x3C;table>
  &#x3C;tr>
    &#x3C;td>Hello&#x3C;/td>
    &#x3C;td>World&#x3C;/td>
  &#x3C;/tr>
&#x3C;/table>
</code></pre>
<p>Fragments can also be declared with a short syntax which looks like an empty tag. Here is an example.</p>
<pre><code class="language-jsx">class Columns extends React.Component {
  render() {
    return (
      &#x3C;>
        &#x3C;td>Hello&#x3C;/td>
        &#x3C;td>World&#x3C;/td>
      &#x3C;/>
    );
  }
}
</code></pre>
<h2>Typical use cases</h2>
<h3>Return multiple elements</h3>
<p>Most common use case for React fragments is probably when you need to return multiple elements. With fragments this is easy and you don't need your typical wrapper div for the elements.</p>
<pre><code class="language-jsx">class Application extends React.Component {
  render() {
    return (
      &#x3C;React.Fragment>
        &#x3C;Header />
        &#x3C;Content />
        &#x3C;Footer />
      &#x3C;/React.Fragment>
    );
  }
}
</code></pre>
<h3>Conditional rendering</h3>
<p>React fragments can also be used when conditionally rendering elements. They make rendering groups of elements a lot easier without adding extra markup.</p>
<pre><code class="language-jsx">class LoginForm extends React.Component {
  render() {
    return (
      &#x3C;form>
        {this.props.isLoggedIn ? (
          &#x3C;React.Fragment>
            &#x3C;h3>Welcome&#x3C;/h3>
            &#x3C;p>You are logged in!&#x3C;/p>
          &#x3C;/React.Fragment>
        ) : (
          &#x3C;React.Fragment>
            &#x3C;h3>Login&#x3C;/h3>
            &#x3C;label for="username">Username&#x3C;/label>
            &#x3C;br />
            &#x3C;input type="text" id="username" />
            &#x3C;br />
            &#x3C;label for="password">Password&#x3C;/label>
            &#x3C;br />
            &#x3C;input type="password" id="password" />
            &#x3C;br />
            &#x3C;input type="submit" value="Login" />
          &#x3C;/React.Fragment>
        )}
      &#x3C;/form>
    );
  }
}
</code></pre>
<h3>Arrays</h3>
<p>Fragments can also help us when rendering arrays, because fragments can have key props! Let's say you have an array of user objects and you want to render all users from the array. You need to set key prop for every user so you would need to use element like div to wrap the user info. But because fragments can have key prop, you can instead use fragments and give the key prop for them and thus you don't need to introduce any extra markup.</p>
<pre><code class="language-jsx">class UserList extends React.Component {
  users = [
    {
      id: 1,
      name: "Jack Bauer",
      email: "jack.bauer@ctu.gov",
      phone: "+358509283928",
    },
    {
      id: 2,
      name: "Tony Almeida",
      email: "tony.almeida@ctu.gov",
      phone: "+358508829378",
    },
    {
      id: 3,
      name: "Chloe O'brian",
      email: "chloe.obrian@ctu.gov",
      phone: "+358508899012",
    },
  ];

  render() {
    return (
      &#x3C;React.Fragment>
        {this.users.map((user) => (
          &#x3C;React.Fragment key={user.id}>
            &#x3C;h2>{user.name}&#x3C;/h2>
            &#x3C;p>{user.email}&#x3C;/p>
            &#x3C;p>{user.phone}&#x3C;/p>
          &#x3C;/React.Fragment>
        ))}
      &#x3C;/React.Fragment>
    );
  }
}
</code></pre>
<h2>Should I use fragments?</h2>
<p>So are fragments worth using instead of say a wrapper div?</p>
<p><a href="https://twitter.com/dan_abramov">Dan Abramov</a> answered this question on <a href="https://stackoverflow.com/questions/47761894/why-are-fragments-in-react-16-better-than-container-divs">StackOverflow</a>:</p>
<ul>
<li>It’s a tiny bit faster and has less memory usage (no need to create an extra DOM node). This only has a real benefit on very large and/or deep trees, but application performance often suffers from death by a thousand cuts. This is one cut less.</li>
<li>Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationship, and adding divs in the middle makes it hard to keep the desired layout while extracting logical components.</li>
<li>The DOM inspector is less cluttered. :-)</li>
</ul>
<p>So the fact that fragments eliminate the wrapper div which can cause problems with invalid HTML and with styling of the components plus the fact that they are faster and the DOM is less cluttered, I'd say they are worth using.</p>
<h2>Wrapping up</h2>
<p>What do you think about React fragments and are you using them in your own projects? Please leave a comment below, I would love to hear from you!</p>
<p>Also remember to subscribe to CodePulse newsletter, to stay tuned on the latest news and posts about modern web development. I also share exclusive tips and tricks for the newsletter subscribers!</p>



[![React Fragments - What, Why, How](http://img.youtube.com/vi/gbONLMqrUxI/0.jpg)](http://www.youtube.com/watch?v=gbONLMqrUxI)

React Fragments were introduced in React 16.2.0. Even though they have been around for a while now, many React developers I have talked to haven't started to use them yet and the number one reason for this usually is that they have heard of them but haven't got around to learn about them.

So what are they and should you start using them? The answer to the latter is YES and the answer for the first question is what this blog post is going to tell you.

_Are you new to React? Be sure to read my post_ [_6 Things Every Beginner React Developer Should Know_](/blog/6-things-every-beginner-react-developer-should-know/)_._

## Problem

As the React.js docs state, a common pattern in React is for components to return multiple elements. Usually these elements are wrapped for example inside a div. In most cases the wrapper div is "irrelevant" and is only added because React components require you to return only one element. This kind of behaviour results in useless markup and sometimes even invalid HTML to be rendered, which is bad.

For example we could have a component `Table` that renders an HTML table and inside that table the columns are rendered with another component called `Columns`. It would probably look something like this.

```jsx
class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}
```

This would result in an invalid HTML to be rendered because the wrapper div from `Columns` component is rendered inside the `<tr>`.

```jsx
<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>
```

## Solution

Solution for this is, you guessed it, fragments! React fragments let you group a list of children without adding extra nodes to the DOM because fragments are not rendered to the DOM. So basically we use React.Fragment where we would normally use a wrapper div.

We can make use of fragments with `<React.Fragments>` syntax. So we could write the `Columns` component as follows.

```jsx
class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}
```

Now the Table component would render following HTML.

```jsx
<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>
```

Fragments can also be declared with a short syntax which looks like an empty tag. Here is an example.

```jsx
class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}
```

## Typical use cases

### Return multiple elements

Most common use case for React fragments is probably when you need to return multiple elements. With fragments this is easy and you don't need your typical wrapper div for the elements.

```jsx
class Application extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Header />
        <Content />
        <Footer />
      </React.Fragment>
    );
  }
}
```

### Conditional rendering

React fragments can also be used when conditionally rendering elements. They make rendering groups of elements a lot easier without adding extra markup.

```jsx
class LoginForm extends React.Component {
  render() {
    return (
      <form>
        {this.props.isLoggedIn ? (
          <React.Fragment>
            <h3>Welcome</h3>
            <p>You are logged in!</p>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <h3>Login</h3>
            <label for="username">Username</label>
            <br />
            <input type="text" id="username" />
            <br />
            <label for="password">Password</label>
            <br />
            <input type="password" id="password" />
            <br />
            <input type="submit" value="Login" />
          </React.Fragment>
        )}
      </form>
    );
  }
}
```

### Arrays

Fragments can also help us when rendering arrays, because fragments can have key props! Let's say you have an array of user objects and you want to render all users from the array. You need to set key prop for every user so you would need to use element like div to wrap the user info. But because fragments can have key prop, you can instead use fragments and give the key prop for them and thus you don't need to introduce any extra markup.

```jsx
class UserList extends React.Component {
  users = [
    {
      id: 1,
      name: "Jack Bauer",
      email: "jack.bauer@ctu.gov",
      phone: "+358509283928",
    },
    {
      id: 2,
      name: "Tony Almeida",
      email: "tony.almeida@ctu.gov",
      phone: "+358508829378",
    },
    {
      id: 3,
      name: "Chloe O'brian",
      email: "chloe.obrian@ctu.gov",
      phone: "+358508899012",
    },
  ];

  render() {
    return (
      <React.Fragment>
        {this.users.map((user) => (
          <React.Fragment key={user.id}>
            <h2>{user.name}</h2>
            <p>{user.email}</p>
            <p>{user.phone}</p>
          </React.Fragment>
        ))}
      </React.Fragment>
    );
  }
}
```

## Should I use fragments?

So are fragments worth using instead of say a wrapper div?

[Dan Abramov](https://twitter.com/dan_abramov) answered this question on [StackOverflow](https://stackoverflow.com/questions/47761894/why-are-fragments-in-react-16-better-than-container-divs):

- It’s a tiny bit faster and has less memory usage (no need to create an extra DOM node). This only has a real benefit on very large and/or deep trees, but application performance often suffers from death by a thousand cuts. This is one cut less.
- Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationship, and adding divs in the middle makes it hard to keep the desired layout while extracting logical components.
- The DOM inspector is less cluttered. :-)

So the fact that fragments eliminate the wrapper div which can cause problems with invalid HTML and with styling of the components plus the fact that they are faster and the DOM is less cluttered, I'd say they are worth using.

## Wrapping up

What do you think about React fragments and are you using them in your own projects? Please leave a comment below, I would love to hear from you!

Also remember to subscribe to CodePulse newsletter, to stay tuned on the latest news and posts about modern web development. I also share exclusive tips and tricks for the newsletter subscribers!


What are React Fragments? How to use them and what are the advantages of using fragments? This article will answer these questions.

React Fragments - What, Why, How

<p>In order to use <a href="https://github.com/css-modules/css-modules">CSS Modules</a> in your Javascript project you usually need to do some configuring. Luckily this is not the case when you are using <a href="https://github.com/facebook/create-react-app">create-react-app</a>. CSS Modules are supported with create-react-app out of the box. There is however a catch that you need to know in order to get your CSS Modules working in your create-react-app project.</p>
<p><em>Read also</em> <a href="/blog/6-things-every-beginner-react-developer-should-know/"><em>6 Things Every Beginner React Developer Should Know</em></a></p>
<p><a href="http://www.youtube.com/watch?v=Udf951dyTdU"><img src="http://img.youtube.com/vi/Udf951dyTdU/0.jpg" alt="HOW TO USE CSS MODULES WITH CREATE-REACT-APP"></a></p>
<p><a href="https://www.youtube.com/watch?v=Udf951dyTdU">Watch through tutorial on YouTube</a></p>
<p>If you want create-react-app to treat a CSS file as CSS Module file, you need to use a specific naming convention when naming your CSS file. You need to name your CSS files with <code>.module.css</code> extension. This way create-react-app knows that the file should be treated as CSS Module. After this you can import the CSS file normally and use the class names from it to style your components.</p>
<p>This post is a short one because I just wanted to write a quick post about this since I was fighting with this a while back. It took me way too long to find the solution for this and hopefully this post helped you to solve the problem with CSS Modules and CRA faster than it took me.</p>
<p>If you would like a more through explanation, I made a video about this to my <a href="https://www.youtube.com/channel/UC34UXFLKqdW3cpk5CBu2Siw">YouTube channel</a>, so be sure to check that out.</p>



In order to use [CSS Modules](https://github.com/css-modules/css-modules) in your Javascript project you usually need to do some configuring. Luckily this is not the case when you are using [create-react-app](https://github.com/facebook/create-react-app). CSS Modules are supported with create-react-app out of the box. There is however a catch that you need to know in order to get your CSS Modules working in your create-react-app project.

_Read also_ [_6 Things Every Beginner React Developer Should Know_](/blog/6-things-every-beginner-react-developer-should-know/)

[![HOW TO USE CSS MODULES WITH CREATE-REACT-APP](http://img.youtube.com/vi/Udf951dyTdU/0.jpg)](http://www.youtube.com/watch?v=Udf951dyTdU)

[Watch through tutorial on YouTube](https://www.youtube.com/watch?v=Udf951dyTdU)

If you want create-react-app to treat a CSS file as CSS Module file, you need to use a specific naming convention when naming your CSS file. You need to name your CSS files with `.module.css` extension. This way create-react-app knows that the file should be treated as CSS Module. After this you can import the CSS file normally and use the class names from it to style your components.

This post is a short one because I just wanted to write a quick post about this since I was fighting with this a while back. It took me way too long to find the solution for this and hopefully this post helped you to solve the problem with CSS Modules and CRA faster than it took me.

If you would like a more through explanation, I made a video about this to my [YouTube channel](https://www.youtube.com/channel/UC34UXFLKqdW3cpk5CBu2Siw), so be sure to check that out.


CSS Modules are supported with create-react-app out of the box. There is however a catch to know in order to get your CSS Modules working in your project.

How To Use CSS Modules With create-react-app

<p>A while back I shared my favourite VS Code extensions exclusively to the <a href="/newsletter">CodePulse newsletter</a> subscribers. I now decided to share them with all of you!</p>
<p><em>If you are not yet subscribed to the newsletter, be sure to <a href="/newsletter">do it now</a>! Doesn't cost you anything.</em></p>
<p>I've been using VS Code quite a while now and even though the plain editor is great, there is plenty of useful extensions that you can install to make it even better. Here are some of my favourites.</p>
<h3>GitLens</h3>
<p><img src="./images/gitlens.png" alt="VS Code extension GitLens"></p>
<p>GitLens supercharges the Git capabilities built into Visual Studio Code. With it you can easily and fast see who/when/why given code was added which gives you better understanding of the code at hand. I absolutely love this extensions since I no longer have to browse through Git logs or commits to find when part of the code was added and who committed it.</p>
<p>You can find it from the Visual Studio Marketplace: <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens</a></p>
<h3>Highlight Matching Tag</h3>
<p><img src="./images/highlight-matching-tag.gif" alt="VS Code extension Highlight Matching Tag"></p>
<p>This extension helps in matching opening and closing tags. I have found it very handy especially with larger components and elements that have many nested elements inside of them.</p>
<p>You can find it from the Visual Studio Marketplace: <a href="https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag">https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag</a></p>
<h3>Settings Sync</h3>
<p><img src="./images/settings-sync.png" alt="VS Code extension Settings Sync"></p>
<p>Useful if you have multiple computers you work on. This extension synchronizes settings, snippets, tehems, file icons, launch, keybindings, workspace and extensions across multiple machines using GitHub Gist.</p>
<p>You can find it from the Visual Studio Marketplace: <a href="https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync">https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync</a></p>
<h3>Import Cost</h3>
<p><img src="./images/import-cost.png" alt="VS Code extension Import Cost"></p>
<p>For me this is in some projects a lifesaver. When you need to make your bundle as small as possible this extension is very handy. It will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.</p>
<p>You can find it from the Visual Studio Marketplace: <a href="https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost">https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost</a></p>
<hr>
<p>Do you think I missed some? Comment below your favourite extensions!</p>



A while back I shared my favourite VS Code extensions exclusively to the [CodePulse newsletter](/newsletter) subscribers. I now decided to share them with all of you!

_If you are not yet subscribed to the newsletter, be sure to [do it now](/newsletter)! Doesn't cost you anything._

I've been using VS Code quite a while now and even though the plain editor is great, there is plenty of useful extensions that you can install to make it even better. Here are some of my favourites.

### GitLens

![VS Code extension GitLens](/blog-posts/best-extensions-for-vs-code-in-2020/images/gitlens.png)

GitLens supercharges the Git capabilities built into Visual Studio Code. With it you can easily and fast see who/when/why given code was added which gives you better understanding of the code at hand. I absolutely love this extensions since I no longer have to browse through Git logs or commits to find when part of the code was added and who committed it.

You can find it from the Visual Studio Marketplace: [https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

### Highlight Matching Tag

![VS Code extension Highlight Matching Tag](/blog-posts/best-extensions-for-vs-code-in-2020/images/highlight-matching-tag.gif)

This extension helps in matching opening and closing tags. I have found it very handy especially with larger components and elements that have many nested elements inside of them.

You can find it from the Visual Studio Marketplace: [https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag)

### Settings Sync

![VS Code extension Settings Sync](/blog-posts/best-extensions-for-vs-code-in-2020/images/settings-sync.png)

Useful if you have multiple computers you work on. This extension synchronizes settings, snippets, tehems, file icons, launch, keybindings, workspace and extensions across multiple machines using GitHub Gist.

You can find it from the Visual Studio Marketplace: [https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)

### Import Cost

![VS Code extension Import Cost](/blog-posts/best-extensions-for-vs-code-in-2020/images/import-cost.png)

For me this is in some projects a lifesaver. When you need to make your bundle as small as possible this extension is very handy. It will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.

You can find it from the Visual Studio Marketplace: [https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

---

Do you think I missed some? Comment below your favourite extensions!


Here is my top picks for the best VS Code extensions in 2020. These are a must have for every web developer using VS Code.