Apa iku state ing aplikasi frontend?

Question

Accepted Answer

**State** yaiku data apa wae sing bisa **owah-owahan sajroning wektu** lan UI gumantung ing dheweke kanggo nggambar. Nalika state owah, UI ngganti kanggo ngrefleksikake. Iku "memori" aplikasi mu saben wektu. ## Conto-conto state ```text ✓ A counter value, a form's input text, a toggle (on/off) ✓ Whether a modal is open, the active tab, loading/error flags ✓ The logged-in user, items in a cart, fetched API data ✓ The current theme (dark/light), selected filters ``` ## State nggerak UI ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is state return ( ); } ``` Pangandharaning intinya saka framework modern: **UI = f(state)**. Kowé ora perlu ngganti DOM kanthi manual; kowé ganti state, lan framework nggambar maneh UI kanggo cocok. Kliken tombol → `count` owah → nomer sing ditampilake ngganti kanthi otomatis. ## State lawan data liya ```text State: changes over time, drives re-renders (count, user, isOpen) Constants: never change (PI, config URLs) — not state Derived: computed FROM state (fullName from firstName + lastName) — don't store separately ``` Tegese ora saben variabel iku state — mung data sing owah *lan* nduweni pengaruh apa sing digambar. Nilai sing bisa kowé ilang saka state sing ana ora kudu disimpen dadi state tartamtu (iku duwe risiko supaya ora sinkron). ## Kategori state ```text Local/UI state → belongs to one component (input text, isOpen) Global state → shared app-wide (user, theme, cart) Server state → data fetched from an API (cached remote data) URL state → in the address bar (filters, page number) ``` ## Mulane penting Ngerti state minangka "data sing owah lan nggerak UI" iku pondasi saka kabeh pengembangan frontend. Model mental **UI = f(state)** nerangake carane React/Vue/Angular bisa gawé — kowé njaga state, lan tampilan terus. Ngenali apa *iku* lan *dudu* state (lan ora ngganda nilai sing bisa dilisani) iku langkah pertama menyang njaga kanthi apik; kabeh ing manajemen state dibangun ing konsep iki.