How To Avoid Unnecessary DIVs When Wrapping Elements In React

Posted on by Nathaniel Kirk
Avoid unnecessary DIVs when wrapping elements in React

This article will show you how to avoid unnecessary DIVs when wrapping elements in React, a common occurrence in every React coder. You can use <React.Fragment> or <> method.

Avoid unnecessary DIVs when wrapping elements in React

Redundant div tags to wrap components are common in new React coders. This will cause div tags that do nothing but wrap the elements inside, so how do we avoid this?

Code:

import React from 'react';
 
const App = () => {
  return (
     <div>
      <h2>Avoid unnecessary DIVs when wrapping elements in React | LearnShareIT </h2>
      <input placeholder='Enter name...'></input>
      <button>Submit</button>
    </div>
  );
};
 
export default App;

As in the example above, we can see that the outermost div tag has only one job to wrap the elements inside.

Use <React.Fragment> method

Fragments are a typical pattern introduced since React 16 was born. It allows you to return multiple elements from a component without generating unnecessary DOM elements. So we can use it to replace the div tags that act as wrappers.

Code:

import React from 'react';
 
const App = () => {
  return (
    <React.Fragment>
       <h2>Avoid unnecessary DIVs when wrapping elements in React | LearnShareIT </h2>
      <input placeholder='Enter name...'></input>
      <button>Submit</button>
    </React.Fragment>
  );
};
 
export default App;

Using this Fragment method, we can see that the div tag is no longer visible when we view the DOM structure.

Use the <> method

You can use <></> as the same way you would any other element, except that it doesn’t support keys and attributes. So you can also replace it with <> tag and end with </> tag. The effect is similar to Fragment but will look more excellent and compact. You no longer have to import Fragments, a great way to optimize your code. 

Note: many tools still do not support this syntax, so <React.Fragment> is recommended.

Code:

import React from 'react';
 
const App = () => {
  return (
    <>
    <h2>Avoid unnecessary DIVs when wrapping elements in React | LearnShareIT </h2>
      <input placeholder='Enter name...'></input>
      <button>Submit</button>
    </>
  );
};
 
export default App;

So you can also avoid unnecessary DIVs when wrapping elements more proactively with the above methods. Hope you will apply these methods in practice. I wish you success with it.

Summary

To summarize, you have learned how to avoid unnecessary DIVs when wrapping elements in React. However, I recommend you use React. Fragment method, although the second method has many advantages, many tools do not support it yet, so you must use it with the latest tools and ide. Wish you a good day!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *