Props itu Kiriman, State itu Pegangan - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Apa Itu Props dan State?

Dalam React, props dan state adalah dua konsep penting yang sering digunakan untuk mengelola data dalam komponen.

• Props (properties) adalah data yang dikirim dari parent ke child component. Props bersifat immutable alias tidak bisa diubah oleh child.
• State adalah data lokal yang disimpan dalam suatu komponen dan bisa berubah dari waktu ke waktu.

Bayangkan props seperti paket yang dikirim dari atasan ke bawahan, sedangkan state adalah barang pribadi yang bisa diubah sesuai kebutuhan.

2. Perbedaan Props dan State

Perbedaan	Props	State
Definisi	Data yang dikirim dari parent ke child	Data yang disimpan secara lokal dalam komponen
Bisa diubah?	Tidak bisa diubah oleh child	Bisa diubah dalam komponen itu sendiri
Penggunaan	Untuk mengirim data ke child component	Untuk mengelola data internal komponen
Sumber Data	Diterima dari parent component	Dikelola di dalam komponen itu sendiri

3. Contoh Penggunaan Props

Mari kita lihat bagaimana props bekerja dalam komponen React:

const Salam = ({ nama }) => {
  return <h1>Halo, {nama}!</h1>;
};

const App = () => {
  return <Salam nama="Budi" />;
};

Dalam contoh ini, nama dikirim sebagai props dari App ke Salam dan akan menampilkan "Halo, Budi!".

4. Contoh Penggunaan State

Sekarang, mari lihat bagaimana state bekerja:

import { useState } from "react";

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

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

Di sini, count adalah state yang dapat berubah setiap kali tombol ditekan.

5. Kapan Menggunakan Props dan State?

Gunakan props jika:

• Data berasal dari parent component.
• Komponen child hanya menampilkan data tanpa mengubahnya.

Gunakan state jika:

• Data hanya digunakan dalam satu komponen.
• Data dapat berubah seiring waktu (misalnya input pengguna, hitungan klik, dll).

6. Kesimpulan

 Props adalah data kiriman dari parent ke child yang tidak bisa diubah.  State adalah data lokal dalam komponen yang bisa diubah.  Props cocok untuk komunikasi antar-komponen, sedangkan state cocok untuk mengelola data internal.

Jadi, props itu kiriman dari bos, sementara state itu pegangan buat diri sendiri!