Bagaimana props dan state bekerja di React Native?

Question

Accepted Answer

**Props** dan **state** adalah konsep React inti yang bekerja identik di React Native: **props** meneruskan data ke dalam komponen (input read-only), sementara **state** menyimpan data yang dapat berubah seiring waktu (memicu re-render). Memahaminya adalah fundamental. ## Props — data yang diteruskan masuk (read-only) ```jsx // props are inputs passed to a component (from its parent) — READ-ONLY function UserCard({ name, age }) { // receives props return {name}, {age}; } // pass props when using the component // → props flow DOWN (parent → child); a component doesn't change its own props ``` ## State — data yang berubah (via useState) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // declare state + its setter return ( setCount(count + 1)}> {count} {/* uses state */} ); } // → calling setCount updates state → component RE-RENDERS with the new value ``` State adalah data internal yang dapat diubah; memperbarui state (melalui setter dari `useState`) memicu re-render — cara UI mencerminkan perubahan. ## Props vs state ```text PROPS → passed IN from the parent; READ-ONLY (the component doesn't change them); for configuration/data from outside STATE → internal to the component; CHANGEABLE (via setState/useState); triggers re-renders; for data that changes over time (user input, toggles, fetched data) → Data flows DOWN via props; state changes drive UI updates. (Same as React for web.) ``` ## Mengapa ini penting Memahami props dan state adalah fundamental untuk React Native karena mereka adalah **konsep React inti yang mendasar pada cara komponen bekerja dan bagaimana UI diperbarui**, jadi ini adalah pengetahuan yang wajib diketahui. **Props** (data read-only yang diteruskan ke komponen dari parent-nya, mengalir ke bawah pohon komponen) adalah cara komponen menerima konfigurasi dan data dari luar, memungkinkan komponen yang dapat digunakan kembali dan dapat dikomposisi. **State** (data internal yang dapat diubah yang dikelola melalui hook `useState`, di mana memperbarui state memicu re-render) adalah cara komponen menyimpan dan merespons data yang berubah seiring waktu (input pengguna, toggle, data yang diambil) — mekanisme yang memungkinkan UI mencerminkan perubahan. Memahami **perbedaan** — props yang diteruskan masuk dan read-only (untuk data eksternal/konfigurasi) versus state yang internal dan dapat diubah (untuk data yang berubah, mendorong re-render) — dan prinsip bahwa **data mengalir ke bawah melalui props sementara perubahan state mendorong pembaruan UI** adalah fundamental untuk membangun aplikasi React Native (dan React) dengan benar. Ini adalah konsep yang sama persis dengan React untuk web, jadi memahaminya ditransfer secara langsung dan esensial bagi siapa pun yang membangun komponen React Native. Mendapatkan props dan state dengan benar (meneruskan data via props, mengelola data yang berubah dengan state, memahami alur data searah) adalah inti untuk komponen yang fungsional dan benar. Karena props dan state adalah pusat dari cara komponen React Native (dan React) bekerja — menerima data (props) dan mengelola perubahan (state) untuk mendorong pembaruan UI — dan memahaminya adalah fundamental untuk membangun aplikasi React Native dengan benar, memahami props dan state adalah pengetahuan React Native yang esensial dan foundational — konsep inti yang harus dipahami setiap developer React Native, identik dengan React web (jadi pengetahuan ditransfer), dan fundamental untuk membangun komponen yang menerima data dan merespons perubahan, mekanik dasar pengembangan UI React Native.