Perbedaan State dengan Props dalam ReactJS

   April 12, 2025       Mahatma Mahardhika

---

Perbedaan State dengan Props dalam ReactJS

Table of Contents

• Pengertian State dan Props
• Perbedaan State dan Props
• Menggunakan State dalam React
• Menggunakan Props dalam React
• Manfaat dan Kegunaan State dan Props
• Contoh Penerapan
• Kesimpulan

---

Pengertian State dan Props

State adalah data internal dalam komponen React yang dapat berubah seiring waktu dan memengaruhi tampilan UI.

Props (properties) adalah data yang dikirim dari komponen induk ke komponen anak dan bersifat immutable (tidak dapat diubah oleh komponen penerima).

---

Perbedaan State dan Props

State	Props
Bisa diubah dalam komponen.	Tidak bisa diubah oleh komponen penerima.
Digunakan untuk data yang berubah dinamis.	Digunakan untuk data yang tetap atau dikirim dari parent.
Dideklarasikan dalam komponen itu sendiri.	Dikirim dari parent ke child sebagai atribut.

---

Menggunakan State dalam React

State dikelola menggunakan useState dalam functional component.

import React, { useState } from "react";

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

  return (
    

      
Nilai: {count}
      
    
  );
};

---

Menggunakan Props dalam React

Props digunakan untuk mengirim data dari parent ke child.

const Greeting = ({ name }) => {
  return 
Hello, {name}!
;
};

export default function App() {
  return ;
}

---

Manfaat dan Kegunaan State dan Props

• State: Digunakan untuk mengelola data yang dapat berubah, seperti input pengguna atau status aplikasi.
• Props: Digunakan untuk mengirim data antar komponen agar lebih modular dan reusable.

---

Contoh Penerapan

Misalnya, sebuah aplikasi yang menampilkan nama pengguna dan memungkinkan perubahan nama.

const UserProfile = ({ name }) => {
  return 
Nama: {name}
;
};

const App = () => {
  const [userName, setUserName] = useState("Alice");

  return (
    

      
      
    
  );
};

---

Kesimpulan

State dan Props adalah dua konsep utama dalam React. State digunakan untuk mengelola data yang berubah, sedangkan Props digunakan untuk mengirim data antara komponen. Dengan memahami perbedaannya, pengembang dapat membangun aplikasi React yang lebih terstruktur dan efisien.