React Hooks'lar React Native'de nasıl çalışır?

Question

Accepted Answer

**Hooks** (useState, useEffect, useContext ve diğerleri) fonksiyonel bileşenlerde state ve yan etkileri yönetmek için kullanılan React özellikleridir — ve React Native'de tamamen aynı şekilde çalışırlar. Temel hooks'ları anlamak React Native bileşenleri oluşturmak için gereklidir.

## useState — state

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

## useEffect — yan etkiler

```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` yan etkileri (veri alma, subscription'lar, timerler) ele alır; dependency array'i ne zaman çalışacağını kontrol eder ve isteğe bağlı bir cleanup fonksiyonu (memory leak'leri önlemek için önemli) vardır.

## Diğer önemli 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 kuralları

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

## Neden önemli

React hooks'ları anlamak React Native için gereklidir çünkü **hooks fonksiyonel bileşenlerde state ve yan etkileri yönetmenin standart yoludur**, modern React Native uygulamaları bu şekilde inşa edilir, bu nedenle mutlaka bilinmesi gereken bilgidir.

Hooks, React Native'de web React'te olduğu gibi aynı şekilde çalışır ve bu bilgi doğrudan aktarılabilir. **useState** (state yönetimi, re-render tetikleme) değişen veriye sahip herhangi bir bileşen için temeldir. **useEffect** özellikle önemlidir: **yan etkileri** (veri alma, subscription'lar, timerler) ele alır; dependency array'i ne zaman çalışacağını kontrol eder ve **isteğe bağlı cleanup fonksiyonu** (subscription'lardan çıkma/temizlenme yaparak leak'leri önlemek için kritiktir) vardır — useEffect'i, dependency array'ini ve cleanup'ı anlamak gereklidir çünkü yan etkiler (örneğin bir ekran yüklendiğinde veri alma) yaygındır ve useEffect'i yanlış yapmak hatalara yol açar (yanlış dependency'lerden sonsuz loop'lar, eksik cleanup'tan leak'ler).

**Diğer önemli hooks'ları** anlamak — useContext (prop drilling yapmadan shared veriyi tüketme), useRef (kalıcı mutable referanslar), useMemo/useCallback (performans için memoization), useReducer (karmaşık state) ve **custom hooks** (useFetch veya useAuth gibi yeniden kullanılabilir state'li logik çıkarma — kod yeniden kullanımı için güçlü bir desen) — gerçek bileşenleri oluşturmak için araç setini kapsar.

**Hooks kurallarını** anlamak (sadece üst seviyede ve sadece bileşenler/custom hooks'lardan çağırma, çünkü React çağrı sırasına bağlıdır) ince hataları önlemek için gereklidir.

Hooks modern fonksiyonel React Native bileşenlerinde state ve yan etkiler için standart mekanizmaoldukları için (ve bilgi web React'ten doğrudan aktarılabilir), temel hooks'ları (özellikle cleanup'ıyla birlikte useState ve useEffect) ve kuralları anlamak doğru bileşenler oluşturmak için gereklidir; React hooks'ları anlamak gereklidir, sık kullanılan React Native bilgisidir — modern React Native bileşenleri oluşturmak için temeldir, state ve yan etkileri yönetmenin merkezindedir ve web React'ten doğrudan aktarılabilir, React Native geliştirme için temel bir beceridir.