React Native માં React hooks કેવી રીતે કામ કરે છે?

Question

Accepted Answer

**Hooks** (useState, useEffect, useContext, અને વધુ) functional components માં state અને side effects ને manage કરવા માટે React ની સુવિધાઓ છે — અને તે React Native માં પણ એક જ રીતે કામ કરે છે. મુખ્ય hooks ને સમજવું 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` side effects (data fetching, subscriptions, timers) ને હેન્ડલ કરે છે જેમાં dependency array તેને ક્યારે ચલાવવું તે નિયંત્રિત કરે છે, અને optional cleanup function (leaks ને રોકવા માટે મહત્વપૂર્ણ).

## અન્ય મુખ્ય 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)
```

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

## શા માટે તે મહત્વપૂર્ણ છે

React hooks ને સમજવું React Native માટે આવશ્યક છે કારણ કે **hooks functional components માં state અને side effects ને manage કરવાનો સ્ટાન્ડર્ડ રીત છે**, જે આધુનિક React Native apps બનાવવાનો રીત છે, તેથી તે જરૂરી જ્ઞાન છે।

Hooks React Native માં React web તરીકે બરાબર કાર્ય કરે છે, આ જ્ઞાનને સીધો ટ્રાન્સફરેબલ બનાવે છે। **useState** (state ને manage કરવું, re-renders ને ટ્રિગર કરવું) બદલાતા ડેટા સાથે કોઈ પણ component માટે મૌલિક છે। **useEffect** ખાસ જરૂરી છે: તે **side effects** (data fetching, subscriptions, timers) ને હેન્ડલ કરે છે જેમાં dependency array તેને ક્યારે ચલાવવું તે નિયંત્રિત કરે છે અને **optional cleanup function** (leaks ને રોકવા માટે critical, unsubscribe/cleanup કરીને) — useEffect, તેના dependency array, અને cleanup ને સમજવું આવશ્યક છે કારણ કે side effects (જેમ કે screen લોડ થાય ત્યારે data fetch કરવું) સામાન્ય છે અને useEffect ને ગલત રીતે વાપરવાથી bugs થાય છે (wrong dependencies થી infinite loops, missing cleanup થી leaks).

**અન્ય મુખ્ય hooks** ને સમજવું — useContext (shared data ને consume કરવું prop drilling વિના), useRef (persistent mutable references), useMemo/useCallback (performance માટે memoization), useReducer (જટિલ state), અને **custom hooks** (reusable stateful logic નિષ્કર્ષણ જેમ કે useFetch અથવા useAuth — code reuse માટે શક્તિશાળી પેટર્ન) — વાસ્તવિક components બનાવવા માટે toolkit કવર કરે છે।

**hooks ના નિયમો** ને સમજવું (તેમને ફક્ત top level પર અને ફક્ત components/custom hooks થી કૉલ કરવું, કારણ કે React call order પર આધારિત છે) subtle bugs ને રોકવા માટે આવશ્યક છે।

Hooks આધુનિક functional React Native components માં state અને side effects માટે સ્ટાન્ડર્ડ મિકેનિઝમ છે (અને જ્ઞાન Web React થી સીધો ટ્રાન્સફર થાય છે), અને મુખ્ય hooks (ખાસ કરીને useState અને useEffect તેના cleanup સાથે) અને નિયમો ને સમજવું સાચા components બનાવવા માટે આવશ્યક છે, તેથી React hooks ને સમજવું આવશ્યક, વારંવાર વપરાતું React Native જ્ઞાન છે — આધુનિક React Native components બનાવવા માટે મૌલિક, state અને side effects ને manage કરવા માટે કેન્દ્રીય, અને web React થી સીધો ટ્રાન્સફરેબલ, React Native development માટે મુખ્ય કૌશલ્ય છે।