Pentingnya Fragment Dalam React JS

React Fragment diperkenalkan dalam React versi 16.2.0. Meskipun sudah lama ada dalam program React, masih banyak developer React JS yang belum mengetahui, atau bahkan menggunakan Fragment dalam struktur coding mereka.

Lalu apakah Fragment itu penting dalam React ? Jika iya mengapa banyak developer yang mengabaikan Fitur React ? Pada artikel ini, kita akan kulas jawaban dari pertanyaan tersebut.

Baca Juga : Panduan Lengkap : Apa itu React JS dan Kelebihannya Untuk Desainer Aplikasi!

Apa itu Fragment dalam React JS ?

Dalam React JS, mengembalikan banyak element  merupakan tugas Component serta pola umum React. Fragment memungkinkan kamu mengelompokan List Component “Child” tanpa menambahkan Node tambahan ke dalam DOM.

Biasanya elemen dalam React dikemas dalam <div>. Namun dalam kebanyakan kasus, penggunaan <div> tidak relevan dan disisipkan dalam code karena memang component react mengharuskan kamu mengembalikan satu element saja.

Hal ini menghasilkan markup yang tidak berguna dan bahkan terkadang menghasilkan HTML yang tidak valid untuk di render.

Sebagai contoh, kita bisa memiliki Tabel component yang merender tabel HTML dan di dalam tabel itu kolom-kolom dirender dengan komponen lain yang disebut Columns. Berikut ini contoh codenya :

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>

    );

  }

}

Baca juga :

• Pengertian State dan Lifecycle pada React JS
• engertian Component dan Props pada React JS

Code Ini akan menghasilkan HTML yang tidak valid untuk di-render karena div dari Component Columns di-render di dalam <tr>.

<table>

  <tr>

    <div>

      <td>Hello</td>

      <td>World</td>

    </div>

  </tr>

</table>

Solusi untuk jenis kasus seperti diatas tidak lain yaitu dengan menggunakan Fragment. React Fragment memungkinkan kamu mengelompokan daftar “Child” tanpa perlu repot-repot menambahkan Nodes extra  ke dalam DOM karena Fragment tidak di render di DOM.

Jadi pada dasarnya, kita hanya perlu mengganti element <Div> dengan React.Fragment.

Kita dapat menggunakan fragment dengan sintaks <React.Fragments> seperti berikut ini :

class Columns extends React.Component {

  render() {

    return (

      <React.Fragment>

        <td>Hello</td>

        <td>World</td>

      </React.Fragment>

    );

  }

}

Sekarang, Component Table akan merender HTML ini :

<table>

  <tr>

    <td>Hello</td>

    <td>World</td>

  </tr>

</table>

Fragmen juga dapat dideklarasikan dengan sintaks pendek yang terlihat seperti tag kosong. Berikut ini contohnya :

class Columns extends React.Component {

  render() {

    return (

      <>

        <td>Hello</td>

        <td>World</td>

      </>

    );

  }

}

Baca Juga :

• Cara Penulisan Code Dasar Pada Program React JS
• Tutorial Install React JS dan Membangun Project Baru!

Use Cases Dalam React Fragment

Return Multiple Element

Penggunaan yang paling umum untuk React fragment adalah ketika kamu perlu mengembalikan beberapa elemen. Dengan fragment, hal ini menjadi lebih mudah dan kamu mungkin tidak memerlukan wrapper seperti <Div>

class Application extends React.Component {

  render() {

    return (

      <React.Fragment>

        <Header />

        <Content />

        <Footer />

      </React.Fragment>

    );

  }

}

Conditional Rendering

React fragment juga dapat digunakan saat merender elemen secara kondisional. Mereka membuat grup rendering elemen jauh lebih mudah tanpa menambahkan markup tambahan.

Baca Juga : Tutorial Membuat Form Login Dengan React Native!

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>

    );

  }

}

Baca juga : 5 Cara Mudah Membuat Website dengan WordPress

Array

Fragmen juga dapat membantu kita saat merender array, karena fragmen dapat memiliki Prop kunci. Katakanlah kamu memiliki array objek pengguna dan kamu ingin merender semua pengguna dari array tersebut.

Kamu perlu mengatur kunci prop untuk setiap pengguna sehingga kamu harus menggunakan elemen seperti div untuk membungkus (wrapping) info pengguna.

Tetapi karena fragmen dapat memiliki prop kunci, kamu dapat menggunakan fragmen dan memberikan prop kunci untuk mereka dan karenanya kamu tidak perlu markup tambahan.

class UserList extends React.Component {

  users = [

    {

      id: 1,

      name: “Jack Bauer”,

      email: “[email protected]”,

      phone: “+358509283928”

    },

    {

      id: 2,

      name: “Tony Almeida”,

      email: “[email protected]”,

      phone: “+358508829378”

    },

    {

      id: 3,

      name: “Chloe O’brian”,

      email: “[email protected]”,

      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>

    );

  }

}

Baca Juga : Proses Installasi dan Konfigurasi CodeIgniter

Haruskah Saya Menggunakan Fragment ?

Dan Abramov menjawab pertanyaan tersebut dalam Stack Overflow

• Perfoma Fragment sedikit lebih cepat dan memiliki lebih sedikit penggunaan memori (tidak perlu membuat node DOM tambahan). Fragment sangat efektif untuk struktur data yang besar dan dalam.
• Beberapa mekanisme CSS seperti Flexbox dan CSS Grid memiliki hubungan component Parent-child, dan menambahkan div di tengah membuatnya sulit untuk mempertahankan tata letak yang diinginkan saat mengekstraksi komponen logis. Dengan Fragment, kasus seperti itu bisa dihindari
• Inspector DOM terlihat lebih Rapi

Penggunaan Frament amatlah penting menurut beberapa pakar React JS, selain mengeliminasi penggunaan <div> yang dapat menyebabkan HTML tidak valid, Fragment juga memiliki perfoma lebih cepat dan membuat DOM terlihat lebih rapi dimata user.

Jadi bagaimana Fragment menurut kamu sendiri ? Perlukah kamu menerapkan Fragment dalam project yang sedang kamu kerjakan.

Berikutnya Baca : 10 Keuntungan Menggunakan React JS Pada Desain Website

Sumber : dev.to