# React Hooks: Modern React Geliştirme Rehberi React Hooks, React 16.8 ile tanıtılan ve React geliştirmede devrim yaratan bir özelliktir. Bu rehberde, Hooks'un tüm yönlerini inceleyecek ve modern React uygulamaları geliştirme becerilerinizi geliştireceksiniz. ## React Hooks Nedir? Hooks, fonksiyonel komponentlerde state ve diğer React özelliklerini kullanmanızı sağlayan fonksiyonlardır. Class component'lere ihtiyaç duymadan React'ın tüm gücünü kullanabilirsiniz. ### Hooks'un Avantajları - **Daha Az Kod**: Class syntax'ına gerek yok - **Daha İyi Kod Organizasyonu**: İlgili mantığı birlikte tutma - **Kolay Test Edilebilirlik**: Pure functions daha kolay test edilir - **Kod Yeniden Kullanımı**: Custom Hooks ile mantık paylaşımı ## useState: State Yönetimi En temel Hook olan useState, komponentlerde state tutmayı sağlar. ### Temel Kullanım ```javascript import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return (

Sayaç: {count}

); } ``` ### Nesne ve Dizi State'i ```javascript function UserProfile() { const [user, setUser] = useState({ name: '', email: '', age: 0 }); const updateName = (name) => { setUser(prev => ({ ...prev, name: name })); }; return ( updateName(e.target.value)} /> ); } ``` ### Lazy Initial State Pahalı hesaplamalar için lazy initialization: ```javascript function ExpensiveComponent() { // Bu fonksiyon sadece ilk render'da çalışır const [data, setData] = useState(() => { const initialData = computeExpensiveValue(); return initialData; }); } ``` ## useEffect: Yan Etki Yönetimi useEffect, component lifecycle'ını yönetmek için kullanılır. ### Temel Kullanım ```javascript import { useEffect } from 'react'; function DataFetcher() { const [data, setData] = useState(null); useEffect(() => { // API çağrısı fetch('https://api.example.com/data') .then(res => res.json()) .then(data => setData(data)); }, []); // Boş dependency array = sadece mount'ta çalış return

{data && JSON.stringify(data)}

; } ``` ### Cleanup Fonksiyonu ```javascript function WebSocketComponent() { useEffect(() => { const ws = new WebSocket('ws://localhost:8080'); ws.onmessage = (event) => { console.log('Mesaj alındı:', event.data); }; // Cleanup: component unmount olduğunda return () => { ws.close(); }; }, []); } ``` ### Dependency Array Best Practices ```javascript function SearchComponent() { const [query, setQuery] = useState(''); const [results, setResults] = useState([]); useEffect(() => { if (!query) return; const timer = setTimeout(() => { searchAPI(query).then(setResults); }, 500); // Debouncing return () => clearTimeout(timer); }, [query]); // query değiştiğinde çalış } ``` ## useContext: Context API Kullanımı Global state yönetimi için useContext: ```javascript import { createContext, useContext, useState } from 'react'; // Context oluştur const ThemeContext = createContext(); // Provider component function ThemeProvider({ children }) { const [theme, setTheme] = useState('light'); return ( {children} ); } // Consumer component function ThemedButton() { const { theme, setTheme } = useContext(ThemeContext); return ( ); } ``` ## useReducer: Kompleks State Yönetimi useState'e alternatif olarak, karmaşık state mantığı için: ```javascript import { useReducer } from 'react'; const initialState = { count: 0, step: 1 }; function reducer(state, action) { switch (action.type) { case 'increment': return { ...state, count: state.count + state.step }; case 'decrement': return { ...state, count: state.count - state.step }; case 'setStep': return { ...state, step: action.payload }; case 'reset': return initialState; default: throw new Error(); } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return (

Sayaç: {state.count}

dispatch({ type: 'setStep', payload: Number(e.target.value) })} />

); } ``` ## useRef: DOM Referansları ve Mutable Values ### DOM Referansı ```javascript import { useRef, useEffect } from 'react'; function FocusInput() { const inputRef = useRef(null); useEffect(() => { // Component mount olunca input'a focus inputRef.current.focus(); }, []); return ; } ``` ### Mutable Value Storage ```javascript function Timer() { const [seconds, setSeconds] = useState(0); const intervalRef = useRef(null); const startTimer = () => { intervalRef.current = setInterval(() => { setSeconds(s => s + 1); }, 1000); }; const stopTimer = () => { clearInterval(intervalRef.current); }; return (

Geçen süre: {seconds}s

); } ``` ## useMemo ve useCallback: Performance Optimization ### useMemo: Expensive Calculations ```javascript import { useMemo, useState } from 'react'; function ExpensiveComponent({ items }) { const [filter, setFilter] = useState(''); // Sadece items veya filter değiştiğinde yeniden hesapla const filteredItems = useMemo(() => { console.log('Filtering items...'); return items.filter(item => item.name.toLowerCase().includes(filter.toLowerCase()) ); }, [items, filter]); return (

setFilter(e.target.value)} />

{item.name}

); } ``` ### useCallback: Function Memoization ```javascript import { useCallback, memo } from 'react'; // Memo ile optimize edilmiş child component const Button = memo(({ onClick, children }) => { console.log('Button rendered:', children); return ; }); function Parent() { const [count, setCount] = useState(0); const [other, setOther] = useState(0); // useCallback olmadan, her render'da yeni fonksiyon // useCallback ile, sadece count değişince yeni fonksiyon const increment = useCallback(() => { setCount(c => c + 1); }, []); return (

Count: {count}

Other: {other}

); } ``` ## Custom Hooks: Kendi Hook'larınızı Oluşturun ### useFetch Hook ```javascript function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { setLoading(true); fetch(url) .then(res => res.json()) .then(data => { setData(data); setLoading(false); }) .catch(err => { setError(err); setLoading(false); }); }, [url]); return { data, loading, error }; } // Kullanım function UserProfile({ userId }) { const { data, loading, error } = useFetch(`/api/users/${userId}`); if (loading) return

Yükleniyor...

; if (error) return

Hata: {error.message}

; return

{data.name}

; } ``` ### useLocalStorage Hook ```javascript function useLocalStorage(key, initialValue) { const [storedValue, setStoredValue] = useState(() => { try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch (error) { console.log(error); return initialValue; } }); const setValue = (value) => { try { const valueToStore = value instanceof Function ? value(storedValue) : value; setStoredValue(valueToStore); window.localStorage.setItem(key, JSON.stringify(valueToStore)); } catch (error) { console.log(error); } }; return [storedValue, setValue]; } // Kullanım function App() { const [name, setName] = useLocalStorage('name', ''); return ( setName(e.target.value)} /> ); } ``` ## React Hooks Best Practices ### 1. Hook Kuralları ```javascript // ✅ DOĞRU: En üst seviyede çağır function Component() { const [state, setState] = useState(0); useEffect(() => {}, []); } // ❌ YANLIŞ: Koşullu kullanma function Component() { if (condition) { const [state, setState] = useState(0); // HATA! } } ``` ### 2. Dependency Array Doğruluğu ```javascript // ✅ DOĞRU: Tüm dependencies belirtilmiş useEffect(() => { console.log(value1, value2); }, [value1, value2]); // ❌ YANLIŞ: Eksik dependency useEffect(() => { console.log(value1, value2); }, [value1]); // value2 eksik! ``` ### 3. Custom Hook Naming ```javascript // ✅ DOĞRU: "use" prefix ile başla function useCustomHook() {} // ❌ YANLIŞ: "use" prefix olmadan function customHook() {} // React bunu Hook olarak tanımaz ``` ## Real-World Örnek: Shopping Cart ```javascript function useShoppingCart() { const [cart, setCart] = useState([]); const addItem = useCallback((product) => { setCart(prev => { const existing = prev.find(item => item.id === product.id); if (existing) { return prev.map(item => item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item ); } return [...prev, { ...product, quantity: 1 }]; }); }, []); const removeItem = useCallback((productId) => { setCart(prev => prev.filter(item => item.id !== productId)); }, []); const total = useMemo(() => { return cart.reduce((sum, item) => sum + (item.price * item.quantity), 0 ); }, [cart]); return { cart, addItem, removeItem, total }; } function ShoppingCart() { const { cart, addItem, removeItem, total } = useShoppingCart(); return (

Sepetim

{cart.map(item => (

{item.name} x {item.quantity}

))}

Toplam: {total} TL

); } ``` ## Sonuç React Hooks, modern React geliştirmede vazgeçilmez bir araçtır. CodeBros olarak projelerimizde: - ✅ Hooks-first yaklaşımı benimsiyoruz - ✅ Custom Hooks ile kod tekrarını önlüyoruz - ✅ Performance optimization için useMemo/useCallback kullanıyoruz - ✅ Clean ve maintainable kod yazıyoruz React projelerinizde profesyonel destek için [CodeBros ekibi](/iletisim) ile iletişime geçin! --- **Etiketler:** #React #Hooks #JavaScript #Frontend #WebDevelopment #ReactJS #CodeBros