React Hooks Detaylı Kullanım Rehberi
İçindekiler
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önetimiuseEffect
- Side effect'leruseContext
- 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
- Hook'ları component seviyesinde çağırın
- Hook isimlerini "use" ile başlatın
- 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
Faydalı Kaynaklar
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.