Apa perbedaan antara state dan props?

Question

Accepted Answer

**Props** adalah input yang **dilewatkan ke** komponen oleh induknya (baca-saja dari sudut pandang anak). **State** adalah data yang dimiliki dan dikelola komponen **secara internal** (dapat diubahnya). Perbedaannya: props berasal dari luar dan tidak berubah dalam komponen; state adalah internal dan dapat diubah. ## Props — dilewatkan, baca-saja ```jsx function Greeting({ name }) { // `name` is a prop from the parent return

Hello, {name}

; // name = "Bob"; // ❌ a child must NOT modify its props } // parent supplies the prop ``` Props mengalir **ke bawah** dari induk ke anak. Anak membacanya tetapi tidak dapat mengubahnya — untuk mengubah nilai prop, induk harus melewatkan yang baru. ## State — dimiliki secara internal, dapat diubah ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is this component's own state return ; // the component updates its OWN state via setCount } ``` State dibuat dan dikontrol *di dalam* komponen; komponen mengubahnya (melalui `setCount`/`setState`), dan mengubahnya memicu render ulang. ## Berdampingan ```text Props State Source passed from parent created in the component Mutable? read-only (in child) yes (via setter) Who controls it the parent the component itself Triggers render when the parent changes it when the component updates it Purpose configure/pass data in track changing internal data ``` ## Mereka bekerja bersama ```jsx function Parent() { const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent return ; // passed DOWN as a PROP } ``` State dari satu komponen sering dilewatkan ke anak sebagai **prop**. Mengangkat state dan melewatkannya ke bawah adalah pola ini — induk memiliki state, anak menerima sebagai props. ## Mengapa ini penting Perbedaan state-vs-props sangat mendasar untuk framework berbasis komponen. Ia mendefinisikan kepemilikan data dan aliran: props adalah konfigurasi eksternal, baca-saja (data ke bawah); state adalah data internal, dapat diubah yang dikelola komponen. Membingungkan mereka — mutasi props, atau menggandakan props ke state — menyebabkan bug klasik. Memahami bahwa data mengalir ke bawah sebagai props sementara setiap komponen memiliki state-nya sendiri adalah fondasi desain komponen React/Vue/Angular.