Kenapa Perlu Menggunakan React Fragments?

Selamat sore teman-teman. Pada kesempatan kali ini kita akan bersama-sama mempelajari tentang fragments. Nah sebelum kita masuk ke topik tentang fragment kita cari dulu permasalahannya. Kalau teman-teman sadari setiap komponen pada react pasti mereturn sebuah elemen baik yang murni elemen atau sudah berbentuk komponen. Karena salah satu requirement reactjs untuk membuat komponen adalah return satu root komponen bisa dibungkus dengan div, wrapper atau komponen lainnya. Contohnya seperti ini

const Header = () => {
	return (
	<div>
		<h1>Hello World</h1>
	</div>
)
}

export default Header

Kita lihat kode diatas mereturn div dan h1. Tapi tetap hanya dibungkus satu root elemen atau komponen. Kemudian kita gunakan komponen header tersebut didalam file app.js.

import logo from './logo.svg';
import './App.css';
import Header from './Header';
 
function App() {
 return (
   <div className="App">
     <header className="App-header">
       <img src={logo} className="App-logo" alt="logo" />
       <p>
         Edit <code>src/App.js</code> and save to reload.
       </p>
       <a
         className="App-link"
         href="https://reactjs.org"
         target="_blank"
         rel="noopener noreferrer"
       >
         Learn React
       </a>
     </header>
     <Header />
   </div>
 );
}
 
export default App;

Maka tampilannya seperti berikut ini

Misalkan kita modifikasi seperti ini atau return lebih dari satu root komponen.

const Header = () => {
	return (
	<div>
		<h1>Hello World</h1>
	</div>
	<div>
		<h2>Stay health yaa</h2>
	</div>
)
}
export default Header;

Jika kita jalankan kode diatas maka akan muncul error seperti berikut ini

Error diatas bahkan kita sudah disarankan untuk menggunakan fitur fragment. Menarik bukan?

Kemudian ada kasus lain pernahkan teman-teman membayangkan jika setiap komponen harus mereturn sebuah elemen yang dibungkus dengan div? Oke untuk project yang skalanya kecil mungkin belum terasa tapi ketika sudah besar maka bisa jadi nanti akan menjadi nested div seperti ini (ini hanya kemungkinan terburuk):

<div>
  <div>
    <div>
        <div>
          <h1>Hello World</h1>
        </div>
      </div>
    </div>
</div>

Gimana? Sangat tidak efektif dan semantic bukan? Maka dari itu munculkah fitur Fragment dari react dimana kita bisa mereturn sebuah komponen tanpa harus menggunakan div. Jika kita ambil definisi react fragment dari situs resminya (https://reactjs.org/docs/fragments.html) maka pengertiannya adalah A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM. Intinya adalah sebuah pola dari react yang memungkinkan untuk mengembalikan multiple element pada sebuah komponen dan dapat mengelompokan komponen children tanpa menambahkan nodes ke dalam DOM. Jadi react fragments disini berperan untuk melengkapi requirement dari react untuk mereturn jsx dan fragment disini bisa dikatakan element kosong.

Ada dua cara menggunakan react fragment. Cara pertama dengan memanggil library react kemudian memanggil opsi fragment seperti ini.

const Header = () => {
	return (
	<React.Fragment>
		<h1>Hello World</h1>
	</React.Fragment>
)
}
export default Header;

Maka ketika kita lihat pada inspect element tampilannya seperti berikut ini.

Kita lihat bahwa komponen header cuma mereturn h1 saja karena kita sudah menggunakan fragment alias element kosong.

Kemudian cara kedua adalah dengan mereturn tag kosong seperti berikut ini

const Header = () => {
	Return (
	<>
		<h1>Hello World</h1>
	</>
)
}
export default Header;

Maka tampilannya seperti berikut ini.

Hasilnya pun sama

Mungkin itu dulu pembahasan mengenai react fragments dan semoga bermanfaat. Jika ada pertanyaan atau saran langsung saja komen dibawah ini ya. Terimakasih

References

#Tutorial #Reactjs #ReactFragments