React.js

React Hooks Detaylı Kullanım Rehberi

React Hooks, fonksiyonel component'lerde state ve yaşam döngüsü yönetimini mümkün kılan devrim niteliğinde bir özelliktir. Bu rehberde, temel hook'lardan özel hook geliştirmeye kadar tüm detayları örneklerle açıklıyoruz.

1. Hooks'a Giriş

2019'da tanıtılan Hooks, React kullanımını kökten değiştirdi. Artık class component'ler olmadan da tüm React özelliklerini kullanabiliyoruz.

1.1 Hooks Nedir?

Hooks, fonksiyonel component'lere state ve lifecycle özellikleri ekleyen fonksiyonlardır. Temel avantajları:

Hooks Avantajları
  • Kod tekrarını azaltır
  • Component'leri daha okunabilir yapar
  • Complex logic'i reusable hale getirir

1.2 Temel Hooks'lar

React'in built-in hook'larından en çok kullanılanlar:

  • useState - State yönetimi
  • useEffect - Side effect'ler
  • useContext - Global state

2. useState ile State Yönetimi

useState, fonksiyonel component'lerde state oluşturmak için kullanılır.

// Temel kullanım
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        Arttır
      </button>
    </div>
  );
}

2.1 Temel Kullanım

useState hook'unun temel kullanımı oldukça basittir. İlk parametre başlangıç değeri, ikinci parametre ise state'i güncelleyen fonksiyondur.

function NameInput() {
  const [name, setName] = useState('');
  
  return (
    <input 
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="İsminizi girin"
    />
  );
}

2.2 Obje ve Dizi Yönetimi

State objelerini güncellerken dikkat edilmesi gerekenler:

// Doğru kullanım
setUser(prev => ({ ...prev, name: 'Yeni İsim' }));

// Yanlış kullanım
setUser({ name: 'Yeni İsim' }); // Diğer alanlar kaybolur

3. useEffect ile Yaşam Döngüsü

useEffect, component mount/unmount ve state değişimlerini yönetir.

// API çağrısı örneği
useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('api/data');
    setData(await response.json());
  };

  fetchData();
}, []); // Sadece ilk render'da çalışır

3.1 Component Mount/Unmount

useEffect hook'u component'in yaşam döngüsünü yönetmek için kullanılır. Mount ve unmount işlemlerini kontrol edebilirsiniz.

useEffect(() => {
  console.log('Component mount edildi');
  
  return () => {
    console.log('Component unmount edildi');
    // Cleanup işlemleri burada yapılır
  };
}, []);

3.2 Bağımlılık Dizisi

useEffect'in ikinci parametresi olan bağımlılık dizisi, effect'in ne zaman çalışacağını belirler.

Bağımlılık Dizisi Örnekleri:
  • [] - Sadece mount'ta çalışır
  • [value] - value değiştiğinde çalışır
  • Parametre verilmezse - Her render'da çalışır
Önemli Uyarı

useEffect içinde async fonksiyon doğrudan kullanılamaz. Her zaman içinde tanımlayın.

4. useContext ile Global State

Context API ile prop drilling sorununu çözün.

// Context oluşturma
const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
}

4.1 Context Oluşturma

Context, prop drilling olmadan component ağacında veri paylaşmanızı sağlar.

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

4.2 Optimize Kullanım

Context kullanırken gereksiz render'ları önlemek için dikkat edilmesi gerekenler:

  • Değer memoization kullanın
  • Context'i mantıklı parçalara bölün
  • Performance için React.memo kullanın

5. Özel Hooks Geliştirme

Tekrar kullanılabilir logic'leri özel hook'lara çevirin.

5.1 Custom Hook Yapısı

Custom hook'lar "use" öneki ile başlayan ve React hook'larını içeren JavaScript fonksiyonlarıdır. İşte temel bir custom hook yapısı:

function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  
  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return {
    value,
    onChange: handleChange
  };
}

// Kullanımı
function LoginForm() {
  const email = useFormInput('');
  const password = useFormInput('');
  
  return (
    <form>
      <input {...email} type="email" />
      <input {...password} type="password" />
    </form>
  );
}

5.2 Gerçek Senaryo Örneği

Gerçek bir uygulama senaryosunda custom hook kullanımı: API çağrıları için bir loading ve error state yönetimi örneği:

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

// Kullanımı
function UserProfile() {
  const { data, loading, error } = useFetch('/api/user');

  if (loading) return <div>Yükleniyor...</div>;
  if (error) return <div>Hata: {error.message}</div>;
  
  return <div>Hoş geldin, {data.name}!</div>;
}

En İyi Uygulamalar

  1. Hook'ları component seviyesinde çağırın
  2. Hook isimlerini "use" ile başlatın
  3. Complex logic'leri özel hook'lara ayırın

Özet

React Hooks modern React geliştirmenin temel taşıdır. Bu rehberde öğrendikleriniz:

  • Temel hook'ların kullanımı
  • Global state yönetimi
  • Özel hook geliştirme teknikleri

Not: Hooks'ları öğrenmek React geliştirme yeteneklerinizi bir üst seviyeye taşıyacaktır. Pratik yapmayı ve resmi dokümantasyonu sıkça ziyaret etmeyi unutmayın.