React Native'de Component, Props, State ve Hook'lar

IDE tarafinda: VS Code tarafinda component dosyasini acip props tiplerini TypeScript interface ile tanimladiginizda IntelliSense butun prop'lari ikonlu olarak listeliyor. useState icin hover ederseniz jenerik tip cikarsamasini goruyorsunuz.

Merhaba arkadaşlar, bu makalemizde React Native uygulamalarının temelini oluşturan Component yapısını, Props ile aralarında veri paylaşımını, State ile durum yönetimini ve en önemlisi Hook'lar ile bu işlemlerin nasıl yapıldığını detaylı bir şekilde inceliyor olacağız. İlk makalemizde bir giriş yapmıştık, şimdi işin asıl eğlenceli kısmına geçiyoruz.

Function Component Nedir?
React Native'de (ve modern React'te) function component yazıyoruz. Adı üstünde, bir JavaScript fonksiyonu. JSX döndürür ve ekranda bir şey gösterir. Class component denilen eski yaklaşım hâlâ çalışır ama artık kimse yazmıyor, hook'larla her şey çok daha temiz oluyor.

En basit function component:

import { Text } from 'react-native';

export function Selamla() {
  return <Text>Merhaba!</Text>;
}

Component'lerin ilk harfi büyük olmak zorunda. selamla yazsaydık React bunu bir HTML tag'i sanırdı ve hata verirdi.

Props: Dışarıdan Veri Almak
Component'lerimiz her zaman aynı şeyi göstermemeli. Dışarıdan gelen veriyle dinamik içerik gösterelim. Bunu props ile yapıyoruz:

import { Text, View, StyleSheet } from 'react-native';

type KullaniciKartiProps = {
  ad: string;
  meslek: string;
  yas: number;
};

export function KullaniciKarti({ ad, meslek, yas }: KullaniciKartiProps) {
  return (
    <View style={styles.kart}>
      <Text style={styles.ad}>{ad}</Text>
      <Text style={styles.meslek}>{meslek}</Text>
      <Text style={styles.yas}>{yas} yaşında</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  kart: {
    backgroundColor: '#1e293b',
    padding: 16,
    borderRadius: 10,
    marginBottom: 12,
  },
  ad: { color: '#f59e0b', fontSize: 18, fontWeight: '700' },
  meslek: { color: '#cbd5e1', fontSize: 14, marginTop: 4 },
  yas: { color: '#94a3b8', fontSize: 12, marginTop: 4 },
});

Kullanımı:

<KullaniciKarti ad="Sem Göksu" meslek="Yazılım Geliştirici" yas={35} />
<KullaniciKarti ad="Ahmet Yılmaz" meslek="Mimar" yas={42} />

Dikkat edelim: string değerler tırnak içinde yazılıyor (ad="Sem Göksu"), ama sayı gibi diğer tipler süslü parantez içinde (yas={35}).

Props Children
Component'e bir değer değil, başka component'ler de geçirebiliriz. Bunun için özel bir prop olan children kullanılır:

type KutuProps = {
  baslik: string;
  children: React.ReactNode;
};

export function Kutu({ baslik, children }: KutuProps) {
  return (
    <View style={styles.kutu}>
      <Text style={styles.baslik}>{baslik}</Text>
      <View style={styles.icerik}>{children}</View>
    </View>
  );
}

// Kullanımı:
<Kutu baslik="Ayarlar">
  <Text>Karanlık mod</Text>
  <Text>Bildirimler</Text>
  <Text>Dil seçimi</Text>
</Kutu>

State: useState Hook'u
Props dışarıdan geliyor ve değiştiremiyoruz. Ama bir component'in kendi içinde değişen değerleri (kullanıcının yazdığı metin, seçili tab, sayaç vs.) olacaksa state kullanmamız gerekiyor. State yönetimi için useState hook'unu kullanıyoruz:

import { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export function Sayac() {
  const [sayi, setSayi] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.sayi}>{sayi}</Text>
      <View style={styles.butonlar}>
        <Button title="-" onPress={() => setSayi(sayi - 1)} />
        <Button title="Sıfırla" onPress={() => setSayi(0)} />
        <Button title="+" onPress={() => setSayi(sayi + 1)} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { alignItems: 'center', padding: 20 },
  sayi: { fontSize: 72, fontWeight: 'bold', color: '#f59e0b', marginBottom: 20 },
  butonlar: { flexDirection: 'row', gap: 10 },
});

useState(0) bize iki şey döndürüyor:

- sayi: Şu anki değer
- setSayi: Bu değeri güncelleyen fonksiyon

Çok önemli: Asla sayi = sayi + 1 şeklinde doğrudan atamayın. Mutlaka setSayi(sayi + 1) kullanın. Aksi halde React ekranı yeniden render etmez ve değişiklik görünmez.

Textbox Input Örneği
Şimdi klasik bir örnek — kullanıcının adını alıp selamlayan bir ekran:

import { useState } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

export function Selamlama() {
  const [ad, setAd] = useState('');

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Adınız ne?</Text>
      <TextInput
        style={styles.input}
        value={ad}
        onChangeText={setAd}
        placeholder="Adınızı yazın..."
      />
      {ad.length > 0 && (
        <Text style={styles.selam}>Merhaba {ad}! 👋</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20 },
  label: { fontSize: 16, marginBottom: 8 },
  input: {
    borderWidth: 1,
    borderColor: '#cbd5e1',
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
  },
  selam: {
    marginTop: 20,
    fontSize: 24,
    color: '#f59e0b',
    fontWeight: '600',
  },
});

TextInput her değişiklikte onChangeText tetikliyor ve yeni metni direkt state'e yazıyor. Altta da ad.length > 0 && kontrolü ile kullanıcı bir şey yazmışsa selamlama mesajını gösteriyoruz.

useEffect Hook'u — Yan Etkiler
useState durumunu tutar, useEffect ise component mount olduğunda, güncellendiğinde veya unmount olacağında kod çalıştırmamızı sağlar. API'den veri çekmek, timer kurmak, event listener eklemek gibi işler için kullanılır:

import { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';

type Yazi = { id: number; title: string; body: string };

export function YazilarListesi() {
  const [yazilar, setYazilar] = useState<Yazi[]>([]);
  const [yukleniyor, setYukleniyor] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
      .then((res) => res.json())
      .then((data) => {
        setYazilar(data);
        setYukleniyor(false);
      })
      .catch((err) => {
        console.error('Veri çekilemedi', err);
        setYukleniyor(false);
      });
  }, []); // Boş array → sadece ilk render'da çalış

  if (yukleniyor) {
    return <ActivityIndicator size="large" color="#f59e0b" />;
  }

  return (
    <View>
      {yazilar.map((y) => (
        <View key={y.id} style={styles.yazi}>
          <Text style={styles.baslik}>{y.title}</Text>
          <Text style={styles.ozet} numberOfLines={2}>{y.body}</Text>
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  yazi: { padding: 16, borderBottomWidth: 1, borderColor: '#e2e8f0' },
  baslik: { fontSize: 16, fontWeight: '600', marginBottom: 4 },
  ozet: { fontSize: 13, color: '#64748b' },
});

Bu örnekte component ilk açıldığında fetch ile API'ye gidip veri çekiyor, gelen veriyi state'e atıyor ve liste şeklinde gösteriyor. Yüklenirken ActivityIndicator (spinner) gösteriyor.

Dependency Array Önemli
useEffect'in ikinci parametresi bir dependency array. Buraya eklediğiniz değerler değiştiğinde effect tekrar çalışır:

// 1. Her render'da çalışır (yan etki, dikkatli kullan)
useEffect(() => { ... });

// 2. Sadece ilk mount'ta çalışır
useEffect(() => { ... }, []);

// 3. id değişirse yeniden çalışır
useEffect(() => { ... }, [id]);

Yanlış dependency array kullanmak sonsuz döngüye veya eksik güncellemelere yol açar. ESLint'in react-hooks/exhaustive-deps kuralı sizi uyarır, dikkate alın.

Custom Hook: Kendi Hook'umuzu Yazalım
Tekrarlı state/effect mantığını custom hook olarak çıkarabiliriz. Örneğin bir AsyncStorage hook'u:

import { useState, useEffect } from 'react';
import AsyncStorage from '@@react-native-async-storage/async-storage';

export function useAsyncStorage<T>(anahtar: string, varsayilan: T) {
  const [deger, setDeger] = useState<T>(varsayilan);
  const [hazir, setHazir] = useState(false);

  useEffect(() => {
    AsyncStorage.getItem(anahtar).then((json) => {
      if (json !== null) setDeger(JSON.parse(json));
      setHazir(true);
    });
  }, [anahtar]);

  const guncelle = async (yeni: T) => {
    setDeger(yeni);
    await AsyncStorage.setItem(anahtar, JSON.stringify(yeni));
  };

  return { deger, guncelle, hazir };
}

Kullanımı son derece temiz:

const { deger: tema, guncelle: setTema, hazir } = useAsyncStorage('tema', 'light');

Özet
Bu makalede:

- Function component yazmayı
- Props ile dışarıdan veri geçmeyi
- useState ile state tutmayı
- useEffect ile yan etkileri yönetmeyi
- Custom hook yazmayı

Gördük. Bu dört kavram React Native uygulamalarının %80'ini kapsıyor. Bir sonraki makalede ekranlar arası geçiş için React Navigation'a bakacağız. Sorularınızı yorum olarak bırakmayı unutmayın, herkese kolay gelsin...