State vs Props di React, Kapan Harus Menggunakannya?

Dalam React, State dan Props adalah dua konsep utama yang digunakan untuk mengelola data dalam komponen. Meskipun keduanya memungkinkan kita untuk menyimpan dan menggunakan data dalam komponen React, ada perbedaan mendasar dalam cara kerja dan penggunaannya.

Jika kamu pernah bingung antara state dan props, artikel ini akan membantu memahami perbedaannya serta kapan harus menggunakan state atau props dalam pengembangan aplikasi React.

1. Apa Itu Props dalam React?

Props (properties) adalah data yang dikirim dari parent component ke child component. Props digunakan untuk membuat komponen lebih fleksibel dan reusable dengan cara memberikan nilai yang berbeda dari luar komponen.

📌 Karakteristik Props:

✅ Dikirim dari parent ke child component.
✅ Bersifat immutable – tidak bisa diubah oleh komponen yang menerimanya.
✅ Membantu membuat komponen lebih fleksibel dan reusable.
✅ Hanya bisa dibaca oleh komponen penerima (read-only).

📌 Contoh Penggunaan Props dalam Function Component

import React from 'react';

function Greeting({ name }) {
  return <h2>Halo, {name}!</h2>;
}

function App() {
  return (
    <div>
      <Greeting name="John" />
      <Greeting name="Jane" />
    </div>
  );
}

export default App;

📌 Penjelasan:

• name dikirim sebagai props dari App ke Greeting.
• Greeting tidak bisa mengubah name, hanya bisa menampilkannya.

Output di Browser:

Halo, John!
Halo, Jane!

2. Apa Itu State dalam React?

State adalah data internal yang disimpan dalam komponen dan bisa berubah seiring waktu. Berbeda dengan props, state bisa diperbarui dan dikelola langsung dalam komponen itu sendiri.

📌 Karakteristik State:

✅ Dikelola di dalam komponen itu sendiri.
✅ Bersifat mutable – bisa diubah dengan setState() atau useState().
✅ Digunakan untuk menyimpan data dinamis, seperti input pengguna atau hasil fetch API.
✅ Perubahan state menyebabkan re-render pada komponen.

📌 Contoh Penggunaan State dalam Function Component

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

export default Counter;

📌 Penjelasan:

• useState(0) membuat state bernama count dengan nilai awal 0.
• setCount(count + 1) memperbarui nilai state saat tombol ditekan.
• Setiap perubahan state akan menyebabkan komponen re-render untuk menampilkan nilai terbaru.

Output di Browser:

Counter: 0
[Klik tombol ➜ Counter: 1]

3. Perbedaan Props vs State dalam React

4. Kapan Menggunakan Props?

✅ Gunakan props jika:

• Kamu ingin mengirim data dari parent ke child component.
• Data tidak perlu diubah oleh komponen penerima.
• Komponen harus bersifat reusable dengan nilai yang berbeda.

❌ Jangan gunakan props jika:

• Data hanya digunakan di dalam satu komponen.
• Komponen perlu mengubah datanya sendiri (gunakan state).

Contoh yang Tepat untuk Props:

<Greeting name="John" />

5. Kapan Menggunakan State?

✅ Gunakan state jika:

• Data dalam komponen bisa berubah (misalnya nilai input form, hasil fetch API, dll).
• Perubahan data harus memicu re-render pada komponen.
• Data hanya digunakan dalam komponen itu sendiri dan tidak perlu dikirim ke luar.

❌ Jangan gunakan state jika:

• Data tidak perlu berubah selama siklus hidup komponen.
• Data hanya digunakan untuk menampilkan informasi statis (gunakan props).

Contoh yang Tepat untuk State:

const [count, setCount] = useState(0);

6. Bisa Tidak Menggunakan Keduanya?

Kadang kita tidak perlu menggunakan props atau state jika datanya bisa dihitung langsung dalam render(). Misalnya:

function LuasPersegi({ sisi }) {
  return <p>Luas: {sisi * sisi}</p>;
}

Di sini, kita tidak perlu state, karena luas bisa dihitung langsung dari props yang diterima.

7. Kesimpulan

• Props digunakan untuk mengirim data dari parent ke child, sedangkan state digunakan untuk mengelola data dalam komponen.
• Props bersifat immutable, sedangkan state bisa diubah menggunakan setState atau useState.
• Perubahan state menyebabkan re-render, sedangkan perubahan props hanya berdampak jika parent component berubah.
• Gunakan props untuk membuat komponen lebih fleksibel, dan gunakan state untuk data yang bisa berubah seiring waktu.

Dengan memahami perbedaan dan kapan harus menggunakan state atau props, kita bisa menulis kode React yang lebih bersih, efisien, dan mudah dikelola!