Cara Split Component di React JS

Split Component?

Kenapa harus di-split? Ok, ini berat kaitannya sama maintainable code dan performance. Penerus kodemu gak bakal betah liat 500++ line lebih hanya karena logic yang tidak reusable. Tidak reusable dalam artian, tidak pernah di refractor sama sekali! So Sad!

Previous Article

Kalau kalian pengikut saya yang setia, di article ini (React Props? Sebenarnya itu cuma state biasa) sebenarnya tanpa sadar kalian sudah belajar splitting component dimana saya memecah row perulangannya ke komponen yang lebih kecil.

Real-world Study Case

Ok mungkin sebagian dari kalian belum tau kalau saya punya side-hustle, nama aplikasi saya itu mejadokter. Ini bagian screenshot yang pernah saya refractor khususnya code splitting.

Yang awalnya bisa sampai 2000 lines of code bisa saya pangkas jadi sekitar 700an, ok masih gak make-sense karna abis di-refractor tapi linesnya masih lewat 600an. Tapi gak kenapa, karena selain saya pangkas lines of codenya saya juga pecah logic yang berulang. Dan sebenernya komponen di halaman ini sama persis dengan di halaman detail/edit rekam medis, tapi somehow saya buat mereka beda komponen 😓.

Nah setelah saya refractor dan lakukan proper code-splitting akhirnya mereka bisa pakai shared-reusable-component. Ingat, kalian gak bisa buat code clean at first place (ok mungkin bisa, saya gak mau takabur bilang kalian gak bisa) tapi pasti susah sekali di awal-awal buat se-clean itu.

Gak Sabar Ngoding?

Ok lanjut ke materi ya, kalian bisa buka code example di article sebelumnya.

Buat penyegaran saya sertakan potongan kodenya diatas. 

Tambahkan Proptypes

import React from "react";
import PropTypes from "prop-types";

export default function RowEmployee({ name, dateJoin }) {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        width: "50vw",
      }}
    >
      <div>{name}</div>
      <div>{JSON.stringify(dateJoin)}</div>
    </div>
  );
}

RowEmployee.PropTypes = {
  name: PropTypes.string,
  dateJoin: PropTypes.string,
};

Pada line 20 dan 21 kita bisa sebutkan semua propTypes yang ada pada komponen tersebut. Kita juga bisa assign si props name atau dateJoin tersebut nantinya akan memiliki tipe data apa, pada contoh tersebut karena sangat sederhana alhasil baru saya tunjukkan dengan tipe data string saja.

Benefit Penambahan PropTypes

Kalian bisa ctrl+space untuk melihat props yang tersedia pada komponen tersebut, untuk membedakan yang mana props dan autocompletion yang lain, kalian bisa perhatikan pada icon kunci inggris di kolom autocompletenya

Summary

Ok dari semua penjelasan diatas baru sebutir contoh tentang split component, dengan memecah komponen menjadi kecil-kecil seperti itu kita bisa memaksimalkan komponen yang mana yang bisa kita gunakan di komponen lain juga (reusable component), tapi hati-hati dan rencanakan dengan baik karena bisa saja split komponen menjadi menyusahkan kalau kita salah dalam melakukan perencanaan.