Bagaimana cara kerja React hooks di React Native?

Question

Accepted Answer

**Hooks** (useState, useEffect, useContext, dan lainnya) adalah fitur React untuk mengelola state dan side effects di functional components — dan mereka bekerja sama di React Native. Memahami hooks utama sangat penting untuk membangun komponen React Native.

## useState — state

```jsx
const [count, setCount] = useState(0);     // state + setter; setting it re-renders
const [user, setUser] = useState(null);
```

## useEffect — side effects

```jsx
// useEffect runs side effects (data fetching, subscriptions) after render
useEffect(() => {
  fetchData();                  // runs after render
  // optional CLEANUP (returned function) — runs on unmount / before re-running
  const sub = subscribe();
  return () => sub.unsubscribe();   // CLEAN UP (prevent leaks)
}, [dependency]);                    // dependency array → when to re-run
// → [] = run once on mount; [dep] = run when dep changes; none = every render
```

`useEffect` menangani side effects (fetching data, subscriptions, timers) dengan dependency array yang mengontrol kapan ia berjalan, dan optional cleanup function (penting untuk mencegah leaks).

## Hook-hook kunci lainnya

```text
useContext → consume context (shared data without prop drilling)
useRef → a mutable reference that persists across renders (e.g. reference a component,
  store a value without re-rendering)
useMemo → memoize an expensive computed value (performance)
useCallback → memoize a function (avoid unnecessary re-creation/re-renders)
useReducer → manage complex state with a reducer
CUSTOM HOOKS → extract reusable stateful logic (e.g. useFetch, useAuth)
```

## Rules of hooks

```text
⚠️ Only call hooks at the TOP LEVEL of a component (not in conditions/loops/nested functions)
⚠️ Only call hooks from React components or custom hooks
→ These rules ensure hooks work correctly (React relies on call order).
```

## Mengapa ini penting

Memahami React hooks sangat penting untuk React Native karena **hooks adalah cara standar untuk mengelola state dan side effects di functional components**, yang merupakan cara aplikasi React Native modern dibangun, jadi ini adalah pengetahuan yang wajib dikuasai.

Hooks bekerja identik di React Native seperti di React untuk web, sehingga pengetahuan ini dapat langsung ditransfer. **useState** (mengelola state, memicu re-renders) adalah fundamental untuk komponen apa pun dengan data yang berubah. **useEffect** sangat penting: ia menangani **side effects** (data fetching, subscriptions, timers) dengan dependency array yang mengontrol kapan ia berjalan dan **optional cleanup function** (crucial untuk mencegah leaks dengan unsubscribing/membersihkan) — memahami useEffect, dependency array-nya, dan cleanup sangat penting karena side effects (seperti fetching data saat screen dimuat) adalah umum dan mendapatkan useEffect dengan salah menyebabkan bugs (infinite loops dari dependencies yang salah, leaks dari cleanup yang hilang).

Memahami **hook-hook kunci lainnya** — useContext (mengonsumsi shared data tanpa prop drilling), useRef (persistent mutable references), useMemo/useCallback (memoization untuk performance), useReducer (complex state), dan **custom hooks** (mengekstrak reusable stateful logic seperti useFetch atau useAuth — pola powerful untuk code reuse) — mencakup toolkit untuk membangun komponen yang sebenarnya.

Memahami **rules of hooks** (memanggilnya hanya di top level dan hanya dari components/custom hooks, karena React mengandalkan call order) sangat penting untuk menghindari subtle bugs.

Karena hooks adalah mekanisme standar untuk state dan side effects di modern functional React Native components (dan pengetahuan langsung dapat ditransfer dari React), dan karena memahami key hooks (terutama useState dan useEffect dengan cleanup-nya) dan rules sangat penting untuk membangun komponen yang benar, memahami React hooks adalah pengetahuan React Native yang essential dan frequently-applied — fundamental untuk membangun modern React Native components, central untuk mengelola state dan side effects, dan directly transferable dari web React, sebuah core skill untuk pengembangan React Native.