React Hook'ları: Canlı Örneklerle Tüm Hook'lar

React hook'ları, adları use ile başlayan ve bir fonksiyon bileşeninin React özelliklerini kullanmasını sağlayan fonksiyonlardır: bir değeri hatırlamak için useState, render'dan sonra kod çalıştırmak için useEffect, bir DOM düğümünü tutmak için useRef, paylaşılan veriyi okumak için useContext. Onları bileşeninin en üstünde çağırırsın, React de değerlerini render'lar arasında korur.

import { useState, useEffect, useRef, useMemo } from 'react';

const FRUITS = ['apple', 'banana', 'cherry', 'grape', 'mango', 'pear'];

export default function App() {
    const [query, setQuery] = useState('');
    const inputRef = useRef(null);

    const matches = useMemo(
        () => FRUITS.filter((f) => f.includes(query.toLowerCase())),
        [query]
    );

    useEffect(() => {
        console.log(`effect: ${matches.length} matches for "${query}"`);
    }, [query, matches.length]);

    return (
        <div>
            <input
                ref={inputRef}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <button onClick={() => inputRef.current.focus()}>Focus</button>
            <ul>
                {matches.map((f) => (
                    <li key={f}>{f}</li>
                ))}
            </ul>
        </div>
    );
}

Burada dört hook birlikte çalışıyor. useState metni saklar, useRef düğmenin ona odaklanabilmesi için input'u gösterir, useMemo filtrelenmiş listeyi sorgu değişene kadar tutar ve useEffect sorgunun değiştiği her render'dan sonra kayıt yazar. an yaz ve Console'u izle: liste güncellendikten sonra her tuş vuruşu için bir satır.

Hook'lar neden var

React 16.8'den önce state ya da yaşam döngüsü kodu gerektiren bir bileşen bir class olmak zorundaydı. Bir özelliğin mantığı componentDidMount, componentDidUpdate ve componentWillUnmount arasında bölünürdü; onu bileşenler arasında paylaşmak ise mixin'ler (class sözdizimiyle hiç çalışmadılar), higher order component'ler ya da render props demekti ve bunların hepsi ağacını ekstra katmanlarla sarardı.

// The class way: one feature, three methods
class Clock extends React.Component {
    state = { now: new Date() };
    componentDidMount() {
        this.id = setInterval(() => this.setState({ now: new Date() }), 1000);
    }
    componentWillUnmount() {
        clearInterval(this.id);
    }
    render() {
        return <p>{this.state.now.toLocaleTimeString()}</p>;
    }
}

Hook'larla aynı özellik tek bir yerde yaşar: efekt zamanlayıcıyı başlatır, temizlemesi onu durdurur.

import { useState, useEffect } from 'react';

function Clock() {
    const [now, setNow] = useState(new Date());

    useEffect(() => {
        console.log('timer started');
        const id = setInterval(() => setNow(new Date()), 1000);
        return () => {
            clearInterval(id);
            console.log('timer stopped');
        };
    }, []);

    return <p>{now.toLocaleTimeString()}</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} clock</button>
            {show && <Clock />}
        </div>
    );
}

Saati gizle; Console timer stopped yazdırır: React, Clock ekrandan ayrıldığında temizlemeyi çalıştırdı. Yeniden göster, taze bir zamanlayıcı başlar. Class bileşenleri React 19'da hâlâ çalışır, ama yeni kod hook'ları kullanır.

Tüm yerleşik hook'lar

React 19.2 hook'larını bir bileşene ne kazandırdıklarına göre gruplar. İlk iki grubu her gün, geri kalanını ise belirli bir sorun gerektirdiğinde kullanacaksın.

use, useActionState, useOptimistic ve useFormStatus React 19 ile geldi, useEffectEvent ise 19.2'de kararlı hâle geldi. Listedeki diğer tüm hook'lar React 18'de de çalışır.

State render eder, ref'ler etmez

Her hook bir render tetiklemez. useState ve useReducer tetikler: değerlerini değiştir, React bileşeni yeniden çizer. useRef sana current alanını özgürce değiştirebileceğin bir nesne verir ve React bu yüzden asla yeniden render etmez. Bu da onu bir zamanlayıcı id'si, önceki bir değer ya da ekranın göstermediği bir sayı için doğru yer yapar.

import { useState, useRef, useReducer, useEffect } from 'react';

function reducer(state, action) {
    if (action === 'add') return { items: state.items + 1 };
    if (action === 'clear') return { items: 0 };
    return state;
}

export default function App() {
    const [cart, dispatch] = useReducer(reducer, { items: 0 });
    const [note, setNote] = useState('');
    const commits = useRef(0);

    useEffect(() => {
        commits.current += 1;
        console.log(`render #${commits.current} reached the screen`);
    });

    return (
        <div>
            <p>Items in cart: {cart.items}</p>
            <button onClick={() => dispatch('add')}>Add item</button>
            <button onClick={() => dispatch('clear')}>Clear</button>
            <p>
                <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note" />
            </p>
        </div>
    );
}

useReducer sepeti, useState notu tutar; ikisi de değiştiklerinde bir render'a yol açar ve efekt her render için bir satır yazar. Efekt ayrıca commits.current'ı değiştirir, ama bu değişiklik asla kendi başına bir render'a yol açmaz, bu yüzden kayıt döngüye girmez. Sayı bileşen gövdesinde değil bir efektte güncellenir, çünkü gövde render sırasında hiçbir şeyi değiştirmemelidir.

Hook kuralları

Her hook iki kurala uyar:

1. Hook'ları bileşeninin en üst düzeyinde çağır; asla bir koşul, bir döngü ya da iç içe bir fonksiyon içinde değil.
2. Hook'ları yalnızca fonksiyon bileşenlerinden ya da kendi özel hook'larından çağır.

React hook'ları adlarıyla tanımaz. Onları çağırdığın sırayla tanır ve bu sıranın her render'da aynı olmasını bekler. Bir if içindeki hook ondan sonraki her hook'u kaydırırdı. Hook kuralları sayfası neyin bozulduğunu ve nasıl düzeltileceğini gösteriyor. use tek istisnadır: bir koşulun içinde çağrılabilir.

İlk özel hook'un

İki bileşenin aynı state'li mantığa ihtiyacı olduğunda onu adı use ile başlayan bir fonksiyona taşı. Bu fonksiyon diğer her hook'u çağırabilir. Onu çağıran her bileşen kendi state'ini alır.

import { useState } from 'react';

function useCounter(start, step) {
    const [count, setCount] = useState(start);
    const increment = () => setCount((c) => c + step);
    const reset = () => setCount(start);
    return { count, increment, reset };
}

function Counter({ label, start, step }) {
    const { count, increment, reset } = useCounter(start, step);
    return (
        <p>
            {label}: {count}{' '}
            <button onClick={increment}>+{step}</button>{' '}
            <button onClick={reset}>Reset</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter label="Apples" start={0} step={1} />
            <Counter label="Points" start={100} step={10} />
        </div>
    );
}

İki sayaç da aynı hook'u çalıştırır, ama birine tıklamak diğerine dokunmaz: özel bir hook state'i değil mantığı paylaşır. useCounter'a bir decrement fonksiyonu ve onu çağıran bir düğme ekle; iki sayaç da onu aynı anda alır. Daha fazla kalıp (useToggle, useDebounce, useLocalStorage) özel hook'lar sayfasında.

Hangi hook'a başvurmalı

• Bir değer değiştiğinde ekranın da değişmesi gerekiyor: useState, ya da birçok olay aynı state'i güncelliyorsa useReducer.
• React dışındaki bir şeyle (bir zamanlayıcı, bir abonelik, bir istek) konuşman gerekiyor: useEffect.
• Bir DOM düğümüne ya da ekranın göstermediği bir değere ihtiyacın var: useRef.
• Ağacın derinlerindeki birçok bileşenin aynı değere ihtiyacı var: useContext.
• Bir render, tek bir hesaplama yüzünden ya da memoize edilmiş bir çocuk yeniden render olduğu için yavaş: useMemo ve useCallback. React Compiler bu memoization'ı senin için ekleyebilir, ama onu elle yazmak hâlâ çalışır ve hâlâ yaygındır.
• Arkasındaki güncelleme ağır olduğu için yazmak takılıyor: useTransition ya da useDeferredValue.