Paano gumagana ang React hooks sa React Native?

Question

Accepted Answer

**Hooks** (useState, useEffect, useContext, at marami pang iba) ay mga feature ng React para sa pagpapahala ng state at side effects sa functional components — at gumagana ang parehong paraan sa React Native. Ang pag-unawa sa mga pangunahing hooks ay mahalaga para sa pagbuo ng React Native components.

## 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` ay humahawak ng side effects (pag-fetch ng data, subscriptions, timers) na may dependency array na kumokontrol kung kailan ito tumatakbo, at isang optional cleanup function (mahalaga para sa pagwewasto ng mga leaks).

## Iba pang mga pangunahing hooks

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

## Mga patakaran ng 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).
```

## Bakit mahalaga

Ang pag-unawa sa React hooks ay mahalaga para sa React Native dahil **ang hooks ay ang karaniwang paraan upang pamahalaan ang state at side effects sa functional components**, na kung paano itinayo ang modernong React Native apps, kaya ito ay dapat-alaman na kaalaman.

Ang mga hooks ay gumagana nang magkapareho sa React Native tulad ng sa React para sa web, na ginagawang direktang mababago ang kaalamang ito. **useState** (pagpapahala ng state, pag-trigger ng re-renders) ay pundamental para sa anumang component na may nagbabagong data. **useEffect** ay partikular na mahalaga: ito ay humahawak ng **side effects** (pag-fetch ng data, subscriptions, timers) na may dependency array na kumokontrol kung kailan ito tumatakbo at isang **optional cleanup function** (kritikal para sa pagwewasto ng mga leaks sa pamamagitan ng pag-unsubscribe/pag-clean up) — ang pag-unawa sa useEffect, ang dependency array nito, at ang cleanup ay mahalaga dahil ang mga side effects (tulad ng pag-fetch ng data kapag nag-load ang screen) ay karaniwan at ang mga pagkakamaling useEffect ay nagdudulot ng bugs (infinite loops mula sa maling dependencies, leaks mula sa nawawalang cleanup).

Ang pag-unawa sa **iba pang mga pangunahing hooks** — useContext (pag-consume ng shared data nang walang prop drilling), useRef (persistent mutable references), useMemo/useCallback (memoization para sa performance), useReducer (kumplikadong state), at **custom hooks** (pag-extract ng reusable stateful logic tulad ng useFetch o useAuth — isang makapangyarihang pattern para sa code reuse) — ay sumasaklaw sa toolkit para sa pagbuo ng tunay na components.

Ang pag-unawa sa **mga patakaran ng hooks** (pagtawag sa kanila lamang sa top level at lamang mula sa components/custom hooks, dahil ang React ay umaasa sa call order) ay mahalaga upang maiwasan ang mga subtil na bugs.

Dahil ang hooks ay ang karaniwang mekanismo para sa state at side effects sa modernong functional React Native components (at ang kaalaman ay direktang naglilipat mula sa React), at dahil ang pag-unawa sa mga pangunahing hooks (lalo na ang useState at useEffect na may cleanup nito) at ang mga patakaran ay mahalaga para sa pagbuo ng mga tamang components, ang pag-unawa sa React hooks ay mahalaga, madalas na ginagamit na kaalaman ng React Native — pundamental sa pagbuo ng modernong React Native components, sentro sa pagpapahala ng state at side effects, at direktang mababago mula sa web React, isang pangunahing kasanayan para sa React Native development.