Yükleniyor...

Hook Referansı

Hook Referansı, React uygulamalarında fonksiyonel bileşenler için özel işlevler sağlayan hook’ların kapsamlı bir rehberidir. Hooks, bileşenlerin durum yönetimini, yan etkilerini ve yaşam döngüsü işlevlerini yönetmek için kullanılır ve sınıf tabanlı bileşenlere ihtiyaç duymadan güçlü ve tekrar kullanılabilir yapılar oluşturmayı mümkün kılar. Bu referans, modern web uygulamaları ve tek sayfa uygulamaları (SPA) geliştiren geliştiriciler için kritik öneme sahiptir.
React’in temel kavramları olan bileşenler, veri akışı, durum yönetimi ve yaşam döngüsü, hooks kullanılarak daha basit ve anlaşılır şekilde uygulanabilir. useState, useEffect, useReducer, useMemo, useCallback ve useContext gibi temel hook’lar, uygulama mantığını modüler, test edilebilir ve performans açısından optimize edilmiş şekilde organize etmeye olanak tanır.
Bu rehberde, okuyucular hook’ları etkin kullanmayı, sık karşılaşılan hatalardan kaçınmayı (prop drilling, gereksiz yeniden render’lar, durum mutasyonları), yeniden kullanılabilir bileşenler oluşturmayı ve performans optimizasyon tekniklerini öğreneceklerdir. Ayrıca hook’ların modern React projelerinde nasıl pratik bir şekilde entegre edildiğini ve bileşen mantığını nasıl sadeleştirdiğini kavrayacaklardır.

Temel Örnek

jsx
JSX Code 
import React, { useState, useEffect } from 'react';

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

useEffect(() => {
document.title = `Sayac: ${count}`;
console.log('Sayac güncellendi:', count);
}, [count]);

const artir = () => setCount(prev => prev + 1);
const azalt = () => setCount(prev => prev - 1);

return (
<div style={{ textAlign: 'center', padding: '20px' }}> <h2>Sayac Hook ile</h2> <p>Güncel değer: {count}</p> <button onClick={azalt}>-</button> <button onClick={artir}>+</button> </div>
);
}

export default Sayac;

Bu örnekte useState hook’u, bileşenin yerel durumunu tutmak ve güncellemek için kullanılır. setCount fonksiyonu çağrıldığında, bileşen yeniden render edilir ve UI otomatik olarak güncellenir. useEffect, yan etkileri yönetir; burada belge başlığını güncellemek ve console’a bilgi yazdırmak için kullanılmıştır. Dependency array ([count]) sayesinde, effect yalnızca count değiştiğinde çalışır, bu da gereksiz yeniden render’ları engeller.
Kod, React’in iyi uygulamalarını gösterir: durumun immutable yönetimi, mantığın kapsüllenmesi ve okunabilirliği, ayrıca bileşen yaşam döngüsünün etkili yönetimi. Bu sayede hook’ların, sınıf kullanmadan durum ve yan etki yönetimini nasıl kolaylaştırdığı pratik olarak gösterilmektedir.

Pratik Örnek

jsx
JSX Code 
import React, { useState, useEffect, useMemo } from 'react';

function FiltreliListe({ items }) {
const [arama, setArama] = useState('');

const filtrelenmisItems = useMemo(() => {
return items.filter(item =>
item.toLowerCase().includes(arama.toLowerCase())
);
}, [items, arama]);

useEffect(() => {
console.log('Filtrelenmiş öğe sayısı:', filtrelenmisItems.length);
}, [filtrelenmisItems]);

return ( <div> <h3>Filtreli Liste</h3>
<input
type="text"
placeholder="Ara..."
value={arama}
onChange={e => setArama(e.target.value)}
/> <ul>
{filtrelenmisItems.map((item, index) => ( <li key={index}>{item}</li>
))} </ul> </div>
);
}

export default FiltreliListe;

Advanced React Implementation

jsx
JSX Code 
import React, { useReducer, useEffect, useCallback } from 'react';

function veriReducer(state, action) {
switch (action.type) {
case 'INIT':
return { ...state, loading: true, error: false };
case 'SUCCESS':
return { ...state, loading: false, data: action.payload };
case 'ERROR':
return { ...state, loading: false, error: true };
default:
return state;
}
}

function useVeriGetir(url) {
const [state, dispatch] = useReducer(veriReducer, {
data: [],
loading: false,
error: false,
});

const getirVeri = useCallback(async () => {
dispatch({ type: 'INIT' });
try {
const response = await fetch(url);
const result = await response.json();
dispatch({ type: 'SUCCESS', payload: result });
} catch {
dispatch({ type: 'ERROR' });
}
}, [url]);

useEffect(() => {
getirVeri();
}, [getirVeri]);

return state;
}

function VeriGoster() {
const { data, loading, error } = useVeriGetir('[https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts)');

if (loading) return <p>Veriler yükleniyor...</p>;
if (error) return <p>Veri yüklenirken hata oluştu.</p>;

return ( <div> <h3>Hook ile Veriler</h3> <ul>
{data.slice(0, 10).map(item => ( <li key={item.id}>{item.title}</li>
))} </ul> </div>
);
}

export default VeriGoster;

Hook kullanımında en iyi uygulamalar arasında özel hook’lar oluşturmak, durumun immutable yönetimi, useMemo ve useCallback ile gereksiz yeniden render’ları engellemek ve Context API ile prop drilling’den kaçınmak yer alır. useReducer, karmaşık durum yönetiminde tercih edilir.
Yaygın hatalar: durumu doğrudan değiştirmek, useEffect bağımlılıklarını yanlış belirlemek ve performans optimizasyonlarını ihmal etmek. Debugging için React DevTools önerilir. Performans optimizasyonu, değer ve fonksiyonların memorizasyonu ile sağlanır. Güvenlik açısından, kullanıcı verileri ve API yanıtları her zaman doğrulanmalı ve side effect’ler temizlenmelidir.

📊 Kapsamlı Referans

React Element/Method Description Syntax Example Notes
useState Yerel durum yönetimi const [state, setState] = useState(initial) useState(0) Render tetikler
useEffect Yan etkiler useEffect(fn, deps) useEffect(()=>{}, [deps]) Render sonrası çalışır
useContext Context erişimi useContext(Context) const val = useContext(MyContext) Prop drilling’i önler
useReducer Karmaşık durum const [state, dispatch] = useReducer(reducer, init) useReducer(reducerFn,{}) State machine tarzı
useMemo Değer memorizasyonu useMemo(fn,deps) useMemo(()=>calc(a,b),[a,b]) Gereksiz hesaplamayı engeller
useCallback Fonksiyon memorizasyonu useCallback(fn,deps) useCallback(()=>handle(),[deps]) Child re-render engeller
useRef DOM veya değer referansı const ref = useRef(initial) ref.current.focus() Render tetiklemez
useLayoutEffect Paint öncesi effect useLayoutEffect(fn,deps) useLayoutEffect(()=>{},[deps]) DOM ile senkron
useImperativeHandle Ref özelleştirme useImperativeHandle(ref,createHandle) useImperativeHandle(ref,()=>({...})) forwardRef ile
useDebugValue DevTools gösterimi useDebugValue(value) useDebugValue('Aktif') Sadece DevTools’ta

📊 Complete React Properties Reference

Property Values Default Description React Support
StrictMode boolean false Hata uyarıları 16.8+
Suspense Component null Lazy loading 16.6+
lazy Function null Dinamik import 16.6+
memo Function null Component memoization 16.8+
Profiler Function null Performans ölçümü 16.9+
Fragment JSX grouping none Element gruplama 16.2+
forwardRef Function null Ref iletme 16.3+
Children Utility null Children yönetimi 16.0+
cloneElement Function null Element klonlama 16.0+
createContext Function null Context oluşturma 16.3+
createRef Function null Ref oluşturma 16.3+

Hook Referansı, bileşen durum yönetimi, yan etkiler ve yaşam döngüsünü etkili şekilde öğrenmek ve uygulamak için kritik bir kaynaktır. Hooks sayesinde bileşenler daha modüler, test edilebilir ve performans açısından optimize edilmiş olur.
Sonraki adımlar: özel hook’lar geliştirmek, Context API ile global state yönetimi, Profiler ile performans ölçümü, Suspense ve server components ile modern uygulama geliştirmek. Bu bilgiler, uygulamaların ölçeklenebilirliğini artırır, kod tekrarını azaltır ve React projelerinde profesyonel bir yapı sağlar.

İlgili Arama Terimleri

Kullanıcılar bu içeriği bu terimlerle de araştırıyor:

react hook referansı react hooks türkçe useState örnek react useEffect kullanımı react react hook rehberi useReducer react useMemo react optimizasyon useCallback örnek react react custom hooks react state yönetimi hooks react performans optimizasyon useContext react örnek react functional components hooks spa react hook kullanımı react yeniden render engelleme

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
4
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
React Ders