React 19 Hook’ları: Bilmeniz Gereken Her Şey

React 19 Hook’ları: Bilmeniz Gereken Her Şey

React 19, fonksiyonel bileşenlerin gücünü daha da artıran önemli güncellemeler getirdi. Bu güncellemelerin en önemli parçası ise, halihazırda oldukça popüler olan Hook’ların daha da geliştirilmiş ve zenginleştirilmiş halidir. Bu makalede, React 19 Hook’larını ayrıntılı olarak ele alacak, kullanım örnekleriyle açıklayacak ve uygulamalarınızda nasıl daha etkili kullanabileceğinizi göstereceğim. React’in sunduğu bu güçlü araçları anlamak, daha temiz, daha okunabilir ve daha sürdürülebilir kod yazmanıza yardımcı olacaktır.

useState Hook’ı: Veri Yönetiminin Temeli

useState, bileşenlerinizin durumunu (state) yönetmenizi sağlayan temel bir Hook’tır. Bir değeri tutar ve bu değeri değiştirdiğinizde bileşeniniz yeniden render edilir. Örneğin, bir sayaç bileşeni oluşturmak için useState‘i nasıl kullanabileceğinizi görelim:

import React, { useState } from 'react';

function Sayaç() {
  const [sayi, sayiyiDegistir] = useState(0);

  return (
    <div>
      <p>Sayı: {sayi}</p>
      <button onClick={() => sayiyiDegistir(sayi + 1)}>Arttır</button>
    </div>
  );
}

export default Sayaç;

Bu örnekte, useState(0) ile başlangıç değeri 0 olan bir sayi durumu oluşturuyoruz. sayiyiDegistir fonksiyonu ise bu durumu güncellememizi sağlıyor. Sonuç olarak, butona her tıklamada sayı artıyor ve bileşen yeniden render ediliyor. Ayrıca, useState‘in karmaşık nesneler ve dizilerle de kullanılabileceğini unutmayın. Büyük bir projede, durum yönetimi için daha gelişmiş çözümler kullanmanız gerekebilir. Ancak küçük uygulamalar için useState son derece yeterlidir.

useEffect Hook’ı: Yan Etkileri Yönetmek

useEffect, bileşeninizin yaşam döngüsü boyunca yan etkileri (network istekleri, zamanlayıcılar, abonelikler vb.) yönetmenizi sağlar. Bu Hook, ikinci argüman olarak bir dizi bağımlılık alır. Bu bağımlılıklar değiştiğinde, useEffect fonksiyonu yeniden çalıştırılır. Örneğin, bir API çağrısı yapıp sonucu ekrana yazdırmak için useEffect‘i kullanabiliriz:

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

function VeriGetir() {
  const [veri, veriyiDegistir] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/veri')
      .then(response => response.json())
      .then(data => veriyiDegistir(data));
  }, []); // Boş dizi, bileşen ilk render edildiğinde sadece bir kere çalıştırılır.

  return (
    <div>
      {veri ? <pre>{JSON.stringify(veri, null, 2)}</pre> : <p>Veri yükleniyor...</p>}
    </div>
  );
}

export default VeriGetir;

Bu örnekte, boş bir dizi bağımlılık belirttik, bu da useEffect‘in sadece bileşen ilk render edildiğinde bir kere çalıştırılacağı anlamına gelir. Bağımlılık dizisine değişkenler ekleyerek, bu değişkenler değiştiğinde useEffect‘in tekrar çalışmasını sağlayabiliriz. Örneğin, bir arama terimi değiştikçe API’yi tekrar çağırabiliriz.

useContext Hook’ı: Durum Yönetimini Basitleştirmek

Büyük uygulamalarda, durum yönetimi karmaşıklaşabilir. useContext Hook’ı, uygulamanızın farklı bölümlerinde durum bilgilerini paylaşmanızı kolaylaştırır. Context API kullanarak, ağaç yapısındaki alt bileşenlere kolayca veri aktarabilirsiniz. Böylece prop drilling’i önleyerek, kodunuzu daha temiz ve okunaklı hale getirebilirsiniz. Daha detaylı bilgi için React Context API dökümanını inceleyebilirsiniz.

useReducer Hook’ı: Karmaşık Durum Yönetimi İçin

useState, basit durum yönetimi için idealdir. Ancak durumunuz karmaşıksa ve birden fazla durum değişikliğini yönetmeniz gerekiyorsa, useReducer daha uygun bir çözüm olabilir. useReducer, durum güncellemelerini merkezi bir yerde yönetmenize olanak tanır ve büyük uygulamalarda daha okunabilir ve sürdürülebilir bir kod yapısı oluşturmanıza yardımcı olur.

Diğer Hook’lar

React 19, useCallback, useMemo, useRef gibi birçok başka yararlı Hook sunmaktadır. useCallback, performansı artırmak için fonksiyonları bellekte saklamayı sağlar. useMemo, pahalı hesaplamaların sonucunu bellekte saklayarak yeniden hesaplamayı önler. useRef ise DOM elementlerine veya diğer değerlere doğrudan erişim sağlamanızı mümkün kılar. Bu Hook’lar hakkında daha fazla bilgi için React dökümanlarını inceleyebilirsiniz.

Umarım bu makale, React 19 Hook’larını anlamanıza yardımcı olmuştur. React öğrenme yolculuğunuzda daha fazla bilgiye ihtiyaç duyarsanız, kendi web sitemi fatihsoysal.com‘u ziyaret edebilirsiniz. Daha fazla React öğrenme kaynağı için React resmi dokümanlarına göz atabilirsiniz.

#Etiketler: React 19, Hook’lar, useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, React Durum Yönetimi, Fonksiyonel Bileşenler, React Öğrenme Kaynakları