React Hooks Temel Rehber

React Hooks Nedir?

React Hooks, React 16.8 ile birlikte gelen ve fonksiyon bileşenlerinde durum yönetimi ve yan etkilerle çalışmayı kolaylaştıran bir özellikler setidir. Hooks, sınıf bileşenlerine ihtiyaç duymadan React uygulamalarında durum (state) ve yaşam döngüsü (lifecycle) gibi özellikleri kullanmamızı sağlar. Bu yazıda React Hooks'un temellerini ele alacağız ve en yaygın kullanılan hook'ları inceleyeceğiz.

React Hooks Kullanmanın Avantajları

React Hooks kullanmanın bir dizi avantajı bulunmaktadır. Öncelikle, kodunuz daha okunabilir ve anlaşılır hale gelir, çünkü sınıf bileşenleri ile kurulan karmaşadan uzaklaşırsınız. Ayrıca, hook'lar yeniden kullanılabilirlik açısından avantaj sağlar; uzun bileşenlerinizi daha küçük ve yönetilebilir parçalara bölmek mümkündür.

En Yaygın Kullanılan Hooks

React'ta en yaygın kullanılan hook'lar şunlardır:

• useState: Bileşenlerin durumunu yönetmek için kullanılır.
• useEffect: Bileşen yaşam döngüsü ile ilişkili yan etkileri yönetmek için kullanılır.
• useContext: Global state yönetimi için context API ile birlikte kullanılır.

Basit Bir Örnek: useState ve useEffect

Şimdi, useState ve useEffect hook'larının nasıl kullanılacağına dair basit bir örnek inceleyelim:

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

const ExampleComponent = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log(`You clicked ${count} times`);
    }, [count]);

    return (
        

            
You clicked {count} times
             setCount(count + 1)}>Click me
        
    );
};

export default ExampleComponent;

Yukarıdaki örnekte, count adında bir durum oluşturuyoruz ve butona her tıkladığımızda bu durumu güncelliyoruz. useEffect hook'u ise count durumu her değiştiğinde çalışarak konsola güncel tıklama sayısını yazdırıyor.

Sonuç

React Hooks, modern React uygulamalarında fonksiyon bileşenleri ile daha basit bir yapı sunar. Bu özellikleri kullanarak, daha sade ve yönetilebilir kodlar yazmak mümkündür. Hooks ile çalışmak, React geliştiricilerin vazgeçilmez araçlarından biri haline gelmiştir. Umarım bu rehber, React Hooks’un temellerini anlamanıza yardımcı olmuştur.