Catatan Jimboy

Pattern di React

May 18, 2018

Pernahkah kamu merasa membenci react ? saya pernah.

Apakah sekarang masih benci ? kalau tidak artinya anda sudah mengenal React. Ya React awalnya sangat membingungkan bagi saya, tapi sekarang malah bikin ketagihan salah satunya karena pattern di React juga bisa memudahkan hidup kita sebagai pengembang web.

Jadi beberapa minggu terakhir saya belajar menggunakan pattern di kode saya. Berikut adalah beberapa pattern yang menurut saya menarik.

Toggle

Dengan pattern ini dapat meng-enkapsulasi logika toggle di dalam component, kemudian men-trigger sebuah method yang mengirim current toggle state kepada component parent agar parent dapat mengolah value ini. Bingung dengan penjelasan saya, ya saya juga bingung menjelaskannya ? hehe, mari belajar dengan langsung melihat kodenya.

Compound Component

Compound component cocok untuk memecah sebuah component jadi beberapa bagian namun tetap fleksibel. Berikut saya memecah sebuah UI Tab menjadi compound component, kira kira strukturnya menjadi seperti ini.

+ Tabs
--+ Tabs.List
----+ Tabs.Tab
--+ Tabs.Panel
----+ Tabs.Panel

Dalam menulis pattern ini saya dapat meng-inject state dari parent ke children component melalui method React.cloneElement jadi children secara ajaib dapat mengetahui state dari parentnya tanpa saya meng-inject secara manual. Ini dimungkinkan karena di fungsi render looping terhadap semua children dan melakukan inject state, maka state tersebut akan menjadi props bagi children.

render() {
  const children = React.Children.map(this.props.children, (child, index) => {
    if (child.type === Panels) {
      return React.cloneElement(child, {
        activeIndex: this.state.activeIndex
      });
    } else if (child.type === List) {
      return React.cloneElement(child, {
        activeIndex: this.state.activeIndex,
        onActivateTab: activeIndex => {
          this.setState({ activeIndex });
        }
      });
    }
    return child;
  });

  return <Fragment>{children}</Fragment>;
}

Dan kenapa saya mengatakan component menjadi tetap fleksibel ? coba saja bermain dengan codesandbox diatas, kemudian tambahkan beberapa tab baru atau pindahkan judul tab ke bagian bawah.

Render Props

Ini yang paling menarik, karena memungkinkan membuat sebuah logika yang dapat digunakan berulang-ulang, karena UI tetap dikirimkan melalui props. Saya sudah coba menerapkannya untuk fetch data, dan pagination. Berikut contoh penerapannya untuk fetch data.

Sekian beberapa pattern yang menurut saya menarik, sebenarnya ada lebih banyak lagi sesuai dengan yang dipaparkan oleh Kent C. Dodds, namun belum semuanya sempat saya coba.

Jika ingin diskusi bisa tinggalkan komentar disini atau di twitter @wayanjimmy. Selamat Koding 🐶 🐱

Tautan Terkait


Kyle Mathews

Ditulis oleh Wayan Jimmy tinggal di Bali, Pemrogram web, Penggemar pempek Palembang. Sekarang lagi apa ?