React Hooks Nedir ve Nasıl Kullanılır? Başlangıç Rehberi

Giriş

React, front-end geliştirme dünyasında devrim yaratan bir kütüphanedir. Geleneksel yaklaşımlardan farklı olarak, kullanıcı arayüzü geliştirmede bambaşka bir paradigma sunmuştur. Ancak, her teknolojide olduğu gibi React’ta da geliştiricilerin karşılaştığı bazı zorluklar bulunmaktadır. Özellikle sınıf bileşenleri ve yaşam döngüsü yöntemleri, başlangıçta birçok geliştirici için karmaşık gelebilir. İşte tam bu noktada React Hooks devreye giriyor! Bu yazıda, React Hooks’un ne olduğunu, temel hooksları ve bu hooksların nasıl kullanılacağını detaylı bir şekilde inceleyeceğiz.

React Hooks Nedir?

React Hooks, React’ın 16.8 sürümüyle birlikte tanıtıldı. Temel amacı, fonksiyonel bileşenlerin sınıf bileşenlerine kıyasla daha fazla özelliğe sahip olmasını sağlamaktır. Önceki React sürümlerinde, durum yönetimi ve yaşam döngüsü fonksiyonları yalnızca sınıf bileşenlerinde kullanılabiliyordu. Ancak Hooks sayesinde fonksiyonel bileşenler de bu yeteneklere kavuştu.

Hooks, React uygulamalarınızı daha basit, okunabilir ve optimize edilmiş hale getirmenizi sağlar. Özellikle büyük projelerde veya karmaşık durum yönetiminin gerektiği uygulamalarda, Hooks’un getirdiği kolaylıklar sayesinde kodunuzu daha etkili bir şekilde organize edebilirsiniz.

Temel React Hooks

React Hooks, fonksiyonel bileşenlerin yeteneklerini genişletmek için bir dizi özellik sunar. Bu bölümde, en yaygın kullanılan iki hook olan useState ve useEffect üzerinde duracağız.

useState: Durum Yönetimi

Her React bileşeni kendi içinde bir duruma (state) sahip olabilir. Önceden, bu durumu sınıf bileşenleri içerisinde yönetebiliyorduk. Ancak useState hook’u sayesinde fonksiyonel bileşenlerde de durum yönetimi yapabiliriz.

useState, bileşen içerisinde bir durumu tanımlamanıza ve bu durumu güncellemenize olanak tanır. Kullanımı oldukça basittir:

const [durum, setDurum] = useState(baslangicDegeri);

Bu kod parçasıyla, durum adında bir state değişkeni ve bu state’i güncellemek için setDurum adında bir fonksiyon oluşturduk. baslangicDegeri ise bu durumun başlangıçta alacağı değerdir.

useState Örneği: Sayaç Uygulaması

Basit bir sayaç uygulaması oluşturalım. Bu uygulamada, bir butona tıklanarak sayının arttırıldığı veya azaltıldığı bir yapı kuracağız.

import React, { useState } from 'react';

function Sayac() {
    const [sayi, setSayi] = useState(0);

    return (
        <div>
            <p>Şu anki sayı: {sayi}</p>
            <button onClick={() => setSayi(sayi + 1)}>Arttır</button>
            <button onClick={() => setSayi(sayi - 1)}>Azalt</button>
        </div>
    );
}

export default Sayac;

Bu örnekte, useState hook’u ile sayi adında bir state oluşturduk ve başlangıç değerini 0 olarak belirledik. Butonlara tıklanarak setSayi fonksiyonu ile bu state’in değeri güncellenmektedir.

useEffect: Yan Etkiler ve Yaşam Döngüsü

useEffect hook’u, bileşenin yaşam döngüsünde belirli aşamalarda gerçekleşmesi gereken yan etkileri tanımlamanıza yardımcı olur. Bu yan etkiler, veri çekme, manuel DOM değişiklikleri veya veri aboneliği gibi işlemler olabilir.

useEffect şu şekilde kullanılır:

useEffect(() => {
// Yan etki kodu buraya yazılır.

return () => {
    // Bileşen kaldırıldığında çalışacak temizleme kodu buraya yazılır.
};

useEffect(() => {
    // Yan etki kodu buraya yazılır.
    
    return () => {
        // Bileşen kaldırıldığında çalışacak temizleme kodu buraya yazılır.
    };
}, [bagimliliklar]);

useEffect Örneği: Başlık Güncelleme

Bu örnekte, bir input alanı kullanarak web sayfasının başlığını (document.title) güncelleyeceğiz.

import React, { useState, useEffect } from 'react';

function BaslikGuncelle() {
    const [baslik, setBaslik] = useState('Başlangıç Başlığı');

    useEffect(() => {
        document.title = baslik;
    }, [baslik]);

    return (
        <div>
            <input 
                value={baslik} 
                onChange={(e) => setBaslik(e.target.value)}
            />
            <p>Yukarıdaki input alanına yazdığınız metin, sayfanın başlığı olarak ayarlanacaktır.</p>
        </div>
    );
}

export default BaslikGuncelle;

Bu örnekte, useState ile baslik adında bir state oluşturduk. Kullanıcının bu state’e giriş yapmasını sağlamak için bir input alanı kullandık. useEffect hook’u ile, baslik state’i her değiştiğinde, web sayfasının başlığını (document.title) bu state’e göre güncelliyoruz.

Diğer Popüler Hooks’lar

React Hooks, uygulamanızı geliştirirken karşılaşabileceğiniz birçok senaryo için çözümler sunar. Bu bölümde, React’ın sunduğu diğer popüler hookslardan bazılarına göz atacağız.

useContext: Global Durum Yönetimi

useContext hook’u, React’in Context API’sini fonksiyonel bileşenlerde kullanmanızı sağlar. Bu hook sayesinde, uygulamanızın farklı bölümlerine kolayca veri iletebilir ve global bir durum yönetimi oluşturabilirsiniz.

Örnek:

import React, { useContext } from 'react';

const TemaContext = React.createContext();

function OrnekBilesen() {
    const tema = useContext(TemaContext);
    return <div style={{ backgroundColor: tema }}>Bu bir {tema} tema bileşenidir.</div>;
}

Bu örnekte, TemaContext adında bir context oluşturduk ve OrnekBilesen içerisinde useContext ile bu context’in değerine eriştik.

useReducer: Karmaşık Durum Yönetimi

useReducer hook’u, daha karmaşık durum yönetimi senaryoları için useState‘e bir alternatiftir. Bu hook, bir reducer fonksiyonu ve başlangıç durumu alarak, güncel durumu ve bu durumu güncellemek için kullanabileceğiniz bir dispatch fonksiyonu döndürür.

Örnek:

import React, { useReducer } from 'react';

const initialState = { sayac: 0 };

function reducer(state, action) {
    switch (action.type) {
        case 'arttir':
            return { sayac: state.sayac + 1 };
        case 'azalt':
            return { sayac: state.sayac - 1 };
        default:
            return state;
    }
}

function SayacBileseni() {
    const [state, dispatch] = useReducer(reducer, initialState);

    return (
        <div>
            Sayı: {state.sayac}
            <button onClick={() => dispatch({ type: 'arttir' })}>Arttır</button>
            <button onClick={() => dispatch({ type: 'azalt' })}>Azalt</button>
        </div>
    );
}

useRef: DOM Referansları ve Değişmez Değerler

useRef hook’u, React bileşenleri içerisinde DOM elementlerine doğrudan erişim sağlamak için kullanılır. Ayrıca, bileşen yeniden render edildiğinde değeri değişmeyen referans değişkenleri oluşturmak için de kullanılır.

Örnek:

import React, { useRef } from 'react';

function OdaklanmaBileseni() {
    const inputRef = useRef(null);

    const odaklan = () => {
        inputRef.current.focus();
    };

    return (
        <div>
            <input ref={inputRef} type="text" />
            <button onClick={odaklan}>Input'a Odaklan</button>
        </div>
    );
}

Bu örnekte, bir input alanına odaklanmak için useRef hook’unu kullandık.

React Hooks Kullanımı: Örnek Projeler

React Hooks’un gücünü gerçekten anlamak için pratik örnekler üzerinden ilerlemek en iyisidir. Bu bölümde, önceki bölümlerde öğrendiğimiz hooksları kullanarak basit projeler oluşturacağız.

Basit Bir ToDo Uygulaması

Bu projede useState hook’unu kullanarak bir ToDo listesi oluşturacağız.

import React, { useState } from 'react';

function ToDoUygulamasi() {
    const [todo, setTodo] = useState('');
    const [todos, setTodos] = useState([]);

    const ekle = () => {
        setTodos([...todos, todo]);
        setTodo('');
    };

    return (
        <div>
            <input 
                value={todo} 
                onChange={(e) => setTodo(e.target.value)}
                placeholder="Yapılacak işi girin..."
            />
            <button onClick={ekle}>Ekle</button>
            <ul>
                {todos.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </div>
    );
}

Bu uygulamada, kullanıcının girdiği yapılacak işleri listelemek için useState hook’unu kullandık.

API’dan Veri Çekme: useEffect ile Kullanımı

Bu örnekte, useEffect hook’u kullanarak bir API’dan veri çekeceğiz.

import React, { useState, useEffect } from 'react';

function VeriListesi() {
    const [veri, setVeri] = useState([]);
    
    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setVeri(data))
    }, []);

    return (
        <div>
            <ul>
                {veri.map(item => (
                    <li key={item.id}>{item.isim}</li>
                ))}
            </ul>
        </div>
    );
}

Bu örnekte, useEffect hook’unu kullanarak bir API’dan veri çektik ve bu veriyi ekranda listeledik.

Sonuç ve Öneriler

React Hooks, fonksiyonel bileşenlerin yeteneklerini genişletmek için React ekibinin sunduğu muhteşem bir özelliktir. Bu rehber boyunca, Hooks’un temel kavramlarına ve en yaygın kullanılan hookslarına daldık. Hooks, sınıf bileşenlerinin karmaşıklığından kaçınmanıza ve daha okunabilir, modüler ve optimize edilmiş React uygulamaları oluşturmanıza olanak tanır.

React ve Hooks’un dinamik doğası göz önüne alındığında, bu teknolojiyle ilgili öğrenilecek çok şey var. Kendinizi sürekli olarak güncel tutmak ve yeni özellikleri, yaklaşımları denemek önemlidir.

Eğer bu rehberi faydalı bulduysanız, lütfen başkalarına da tavsiye edin. Eğitim materyallerimiz ve blog yazılarımız hakkında geri bildirimleriniz bizim için çok değerli!