React Props? Sebenarnya Itu Cuma State Biasa

Apa sih props di react?

Ngomongin props di react nggak jauh-jauh dari yang namanya components, baik smart-components atau komponen penyusun tampilan biasa. Pada dasarnya props memungkinkan kita memberikan hak akses pada state/variable di parent komponen supaya bisa di konsumsi oleh child komponen.

Contoh sederhana

{employees.map((item) => {
    return (
        <RowEmployee
        key={item.dateJoin}
        dateJoin={item.dateJoin}
		name={item.name} 
		/>
    );
})}

Potongan kode di atas menunjukkan bahwa ada sebuah komponen react dengan nama <RowEmployee /> yang kita beri props dateJoindan name,jangan lupa kita sisipkan props key pada element di setiap kita melakukan perulangan

Lanjut ngoding...

1.    Bahan Dasar

function App() {
  const employees = [
    { name: "Avriza Hakim", dateJoin: new Date(2021, 3, 19) },
    { name: "Danny Bramantyo", dateJoin: new Date(2021, 8, 27) },
    { name: "Angga Berdikari", dateJoin: new Date(2021, 0, 30) },
  ];

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Aplikasi kepegawaian sangat cetar membahana!</p>

        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            width: "50vw",
          }}
        >
          <div>Nama Lengkap</div>
          <div>Tanggal Bergabung</div>
        </div>
        {employees.map((item) => {
          return (
            <div
              key={item.dateJoin}
              style={{
                display: "flex",
                justifyContent: "space-between",
                width: "50vw",
              }}
            >
              <div>{item.name}</div>
              <div>{JSON.stringify(item.dateJoin)}</div>
            </div>
          );
        })}
      </header>
    </div>
  );
}

Berikut potongan kode awal sebelum baris dari data employee kita pecah ke child komponen <RowEmployee />, pada line 5 ada sebuah variable menggunakan const yang berisi data employees, lanjut di line 29-39 adalah potongan kode yang harus kita improve menjadi child komponen dan akan kita lewati props

2.    Refractoring code

Intinya refractoring code itu kita pecah komponen yang sering berulang-ulang sehingga kita bisa gunakan secara efisien, tentunya juga bisa memangkas line of code , mulai dengan membuat file baru dengan nama RowEmployee.js. 

import React from "react";

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>
  );
}

Kita bisa cut line 29-39 (pada bagian bahan dasar) untuk kita paste di file RowEmployee.js di line 5 seperti potongan kode diatas. Lalu kita hapus props keynya karena yang di ulang bukan div ini melainkan komponen RowEmployee yang nanti kita pasang di file parentnya.

Perhatikan pada line 3 kita juga menerima props dimana pada kasus ini langsung kita destructure si props ini menjadi name dan dateJoin 

3.    Render <RowEmployee / >

{employees.map((item) => {
    return (
        <RowEmployee
        key={item.dateJoin}
        dateJoin={item.dateJoin}
		name={item.name}
		/>
    );
})}

Dari baris div yang panjang tadi bisa kita gantikan dengan single line komponen <RowEmployee … dengan list props seperti potongan kode diatas, jangan lupa menambahkan props key karena reactjs butuh informasi ini untuk mengetahui item mana yang sedang diberlakukan perulangan.

PRO TIPS

Usahakan props pada child komponen seperti ini menjadi primitive variables, maksudnya bukan object dalam kata lain seperti, string, number dan semacamnya. Kenapa harus primitive variable, ini dampaknya ke performance, naturalnya setiap komponen sudah melakukan pengecekan pada setiap perubahan props, ketika kita lewatkan object pada props, kita harus melakukan pengecekan extra untuk menahan re-render pada semua komponen.

Summary

Sebenernya kita bisa lewatkan hampir apapun pada props, tapi ingat jangan sampai terjebak props ini dari siapa dan akan kemana. Jika ingin melewatkan state ke deep-nested komponen sebaiknya kamu belajar Redux atau state management lainnya