Bagaimanakah React hooks berfungsi dalam React Native?

Question

Accepted Answer

**Hooks** (useState, useEffect, useContext, dan banyak lagi) ialah ciri React untuk menguruskan state dan kesan sampingan dalam komponen berfungsi — dan ia berfungsi sama dalam React Native. Memahami hooks utama adalah penting untuk membina komponen React Native.

## useState — state

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

## useEffect — kesan sampingan

```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` mengendalikan kesan sampingan (mengambil data, langganan, pemasa) dengan tatasusunan dependency yang mengawal bila ia berjalan, dan fungsi pembersihan pilihan (penting untuk mencegah kebocoran).

## Hooks utama lain

```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)
```

## Peraturan 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 ia penting

Memahami React hooks adalah penting untuk React Native kerana **hooks ialah cara standard untuk menguruskan state dan kesan sampingan dalam komponen berfungsi**, yang merupakan cara aplikasi React Native moden dibina, jadi ia merupakan pengetahuan yang mesti diketahui.

Hooks berfungsi secara identik dalam React Native seperti dalam React untuk web, menjadikan pengetahuan ini boleh dipindahkan terus. **useState** (menguruskan state, mencetuskan render semula) adalah asas untuk mana-mana komponen dengan data berubah. **useEffect** terutamanya penting: ia mengendalikan **kesan sampingan** (mengambil data, langganan, pemasa) dengan tatasusunan dependency yang mengawal bila ia berjalan dan **fungsi pembersihan pilihan** (penting untuk mencegah kebocoran dengan nyahlanggan/membersihkan) — memahami useEffect, tatasusunan dependencynya, dan pembersihan adalah penting kerana kesan sampingan (seperti mengambil data apabila skrin dimuatkan) adalah biasa dan menyalahgunakan useEffect menyebabkan pepijat (gelung tak terhingga daripada dependency yang salah, kebocoran daripada pembersihan yang hilang).

Memahami **hooks utama lain** — useContext (mengguna data dikongsi tanpa prop drilling), useRef (rujukan boleh ubah yang berkekalan), useMemo/useCallback (memoization untuk prestasi), useReducer (state kompleks), dan **custom hooks** (mengekstrak logik stateful boleh guna semula seperti useFetch atau useAuth — corak berkuasa untuk penggunaan semula kod) — merangkumi kit alat untuk membina komponen sebenar.

Memahami **peraturan hooks** (memanggilnya hanya di peringkat atas dan hanya daripada komponen/custom hooks, kerana React bergantung pada susunan panggilan) adalah penting untuk mengelakkan pepijat halus.

Memandangkan hooks ialah mekanisme standard untuk state dan kesan sampingan dalam komponen React Native berfungsi moden (dan pengetahuan dipindahkan terus daripada React), dan memandangkan memahami hooks utama (terutamanya useState dan useEffect dengan pembersihannya) serta peraturan adalah penting untuk membina komponen yang betul, memahami React hooks adalah pengetahuan React Native yang penting dan kerap digunakan — asas untuk membina komponen React Native moden, penting kepada pengurusan state dan kesan sampingan, dan boleh dipindahkan terus daripada React web, satu kemahiran teras untuk pembangunan React Native.