Cum funcționează React hooks în React Native?

Question

Accepted Answer

**Hooks** (useState, useEffect, useContext și altele) sunt funcționalități React pentru gestionarea stării și efectelor secundare în componente funcționale — și funcționează la fel în React Native. Înțelegerea hook-urilor principale este esențială pentru construirea componentelor React Native.

## useState — stare

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

## useEffect — efecte secundare

```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` gestionează efectele secundare (preluarea datelor, abonamente, cronometri) cu un tablou de dependențe care controlează când se execută, și o funcție de curățare opțională (importantă pentru prevenirea scurgerilor).

## Alte hook-uri principale

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

## Regulile hook-urilor

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

## De ce este important

Înțelegerea React hooks este esențială pentru React Native deoarece **hooks sunt modul standard de a gestiona starea și efectele secundare în componente funcționale**, care sunt modul în care sunt construite aplicațiile moderne React Native, deci este cunoștințe obligatorii.

Hooks funcționează identic în React Native ca și în React pentru web, făcând această cunoaștere direct transferabilă. **useState** (gestionarea stării, declanșarea re-randării) este fundamental pentru orice componentă cu date în schimbare. **useEffect** este deosebit de important: gestionează **efectele secundare** (preluarea datelor, abonamente, cronometri) cu un tablou de dependențe care controlează când se execută și o **funcție de curățare opțională** (crucială pentru prevenirea scurgerilor prin dezabonare/curățare) — înțelegerea useEffect, a tabloului său de dependențe și curățarea este esențială, deoarece efectele secundare (cum ar fi preluarea datelor când se încarcă un ecran) sunt frecvente și greșelile în useEffect provoacă bug-uri (bucle infinite din cauza dependențelor greșite, scurgeri din cauza curățării lipsă).

Înțelegerea **altor hook-uri principale** — useContext (consumul datelor partajate fără prop drilling), useRef (referințe mutabile persistente), useMemo/useCallback (memoizare pentru performanță), useReducer (stare complexă), și **hook-uri personalizate** (extragerea logicii statefull reutilizabile, cum ar fi useFetch sau useAuth — un model puternic pentru reutilizarea codului) — acoperă setul de instrumente pentru construirea componentelor reale.

Înțelegerea **regulilor hook-urilor** (apelarea lor doar la nivelul superior și doar din componente/hook-uri personalizate, deoarece React se bazează pe ordinea apelurilor) este esențială pentru a evita bug-urile subtile.

Deoarece hooks sunt mecanismul standard pentru starea și efectele secundare în componentele React Native funcționale moderne (și cunoștințele se transferă direct din React), și deoarece înțelegerea hook-urilor principale (mai ales useState și useEffect cu curățarea acesteia) și a regulilor este esențială pentru construirea componentelor corecte, înțelegerea React hooks este cunoștințe React Native esențiale și frecvent aplicate — fundamental pentru construirea componentelor moderne React Native, central la gestionarea stării și efectelor secundare, și direct transferabil din React web, o abilitate de bază pentru dezvoltarea React Native.