React geliştiricileri için bile zaman zaman karmaşıklaşabilen durum yönetimi ve bileşen mantığı, Hooks ile devrim niteliğinde bir sadelik kazanıyor. Bu kapsamlı makalede, React Hooks’un ne olduğunu, neden bu kadar önemli olduğunu ve uygulamalarınızda nasıl etkili bir şekilde kullanabileceğinizi adım adım keşfedeceğiz. Artık sınıf bileşenlerinin getirdiği karmaşadan kurtulup, daha temiz, anlaşılır ve bakımı kolay kodlar yazmaya hazır olun.

React Hooks, React 16.8 sürümüyle birlikte tanıtılan, fonksiyonel bileşenlerde durum (state) ve yaşam döngüsü özelliklerini kullanmamıza olanak tanıyan özel JavaScript fonksiyonlarıdır. Geleneksel olarak, durum yönetimi ve yan etkiler (side effects) gibi özellikler yalnızca sınıf bileşenlerinde kullanılabilirken, Hooks bu kısıtlamayı ortadan kaldırdı. Bu yenilik, React topluluğunda büyük bir heyecan yarattı ve geliştirme süreçlerimizi kökten değiştirdi.

Peki, Hooks neden bu kadar önemli ve hayatımızı nasıl kolaylaştırıyor? Temel olarak, sınıf bileşenlerinin getirdiği bazı zorlukları ortadan kaldırıyorlar. Örneğin, this anahtar kelimesinin karmaşık bağlama mekanizmaları, sınıf bileşenlerinde sıkça karşılaşılan bir problemdi. Özellikle yeni başlayan geliştiriciler için this‘in farklı bağlamlarda nasıl davrandığını anlamak kafa karıştırıcı olabiliyordu. Hooks ile birlikte fonksiyonel bileşenler ön plana çıktı ve this karmaşası büyük ölçüde azaldı. Artık bileşen mantığını çok daha okunabilir ve yönetilebilir bir şekilde, basit JavaScript fonksiyonları içerisinde yazabiliyoruz. Bu durum, özellikle büyük ve karmaşık uygulamaların geliştirilmesinde kod kalitesini önemli ölçüde artırıyor.

Buna ek olarak, sınıf bileşenlerindeki yaşam döngüsü metodları (componentDidMount, componentDidUpdate, componentWillUnmount gibi) genellikle birbiriyle alakasız mantıkları aynı yerde barındırma eğilimindeydi. Örneğin, veri çekme işlemi hem componentDidMount hem de componentDidUpdate içinde tekrar edebiliyor, veya bir olay dinleyicisi ekleme ve kaldırma mantığı iki farklı yaşam döngüsü metoduna yayılıyordu. Bu da kodun anlaşılmasını ve sürdürülmesini zorlaştırıyordu. Hooks, özellikle useEffect ile bu problemi çözerek, ilgili mantıkları tek bir fonksiyon içinde birleştirmemizi sağlıyor. Artık veri çekme, abonelikler veya DOM manipülasyonu gibi yan etkileri çok daha düzenli bir şekilde yönetebiliyoruz. Dolayısıyla, kodunuzun farklı parçalarına dağılmış mantıklar yerine, ilgili mantıkları bir arada tutarak okunabilirliği ve bakımı iyileştiriyorsunuz.

Bir diğer önemli avantajı ise yeniden kullanılabilirlik. Hooks, durum yönetimi veya yan etki mantığını bileşenler arasında kolayca paylaşılabilir hale getiriyor. Kendi özel Hook’larınızı yazarak, bir kez yazdığınız bir mantığı birden fazla bileşende hiç tekrar etmeden kullanabilirsiniz. Bu, özellikle aynı veya benzer işlevselliği farklı yerlerde uygulamanız gerektiğinde büyük bir zaman tasarrufu sağlar ve kod tekrarını azaltır. Bu sayede, daha modüler, ölçeklenebilir ve temiz bir kod tabanı oluşturabilirsiniz. Sonuç olarak, React Hooks, hem geliştirme verimliliğini artıran hem de uygulama performansını olumlu yönde etkileyen güçlü bir araç setidir. Bu yenilikler, modern React uygulamalarının vazgeçilmez bir parçası haline gelmiştir.

Temel Kavramlar: Class Component’lardan Fonksiyonel Component’lara Geçiş Nasıl Oldu?

React’in ilk zamanlarında, bileşenler genellikle iki şekilde tanımlanırdı: fonksiyonel bileşenler (stateless functional components) ve sınıf bileşenleri (class components). Fonksiyonel bileşenler, adından da anlaşılacağı gibi, sadece prop’ları alıp JSX döndüren basit JavaScript fonksiyonlarıydı. Ancak durum yönetimi veya yaşam döngüsü metodları gibi daha gelişmiş özelliklere ihtiyaç duyulduğunda, sınıf bileşenleri kullanmak zorunluydu. Sınıf bileşenleri, React.Component sınıfından miras alır ve kendi içinde durumlarını (this.state) ve çeşitli yaşam döngüsü metodlarını (componentDidMount, componentDidUpdate vb.) barındırırdı. Bu yapı, başlangıçta güçlü görünse de, zamanla bazı zorlukları beraberinde getirdi.

Sınıf bileşenlerinin en belirgin zorluklarından biri, this anahtar kelimesinin nasıl çalıştığını anlamaktı. JavaScript’teki this, çağrıldığı bağlama göre değişir ve bu durum, özellikle olay yöneticileri içinde veya callback fonksiyonları arasında this‘i doğru şekilde bağlamak için sürekli olarak .bind(this) kullanma veya arrow fonksiyonları tercih etme gerekliliği yaratırdı. Bu, kodu hem uzatır hem de potansiyel hatalara yol açabilirdi. Ayrıca, sınıf bileşenlerinde yaşam döngüsü metodlarının kullanımı da bir diğer karmaşıklık kaynağıydı. Örneğin, bir bileşen yüklendiğinde (mount) veri çekme, güncellendiğinde (update) ek bir işlem yapma veya bileşen kaldırıldığında (unmount) temizlik yapma gibi farklı mantıklar, ayrı ayrı metodlar içinde yazılırdı. Ancak çoğu zaman, bu metodlar arasında birbiriyle ilişkili mantıklar dağılırdı. Örneğin, bir veri çekme işlemi componentDidMount‘ta başlatılırken, aynı veriyi başka bir prop değiştiğinde yeniden çekme mantığı componentDidUpdate‘te yazılmak zorundaydı. Bu, aynı mantığın farklı yerlere yayılmasına ve kodun okunabilirliğinin azalmasına neden oluyordu.

İşte bu noktada React Hooks devreye girdi ve fonksiyonel bileşenlere sınıf bileşenlerinin gücünü kazandırdı. Hooks, temelde bir bileşenin durumuna ve yaşam döngüsüne “takılmanızı” sağlayan fonksiyonlardır. Bu sayede, artık durum yönetimi (useState ile) ve yan etkiler (useEffect ile) gibi özellikleri doğrudan fonksiyonel bileşenler içinde kullanabiliyoruz. Bu geçiş, geliştiricilere sınıf bileşenlerinin getirdiği karmaşadan kurtulma ve daha basit, daha temiz bir sözdizimi ile çalışma fırsatı sundu. Örneğin, this.state = {} ve this.setState({}) gibi ifadeler yerine, const [state, setState] = useState(initialValue) gibi daha modern ve anlaşılır bir yapı kullanmaya başladık. Benzer şekilde, yaşam döngüsü metodlarının yerini useEffect aldı, bu da ilgili yan etki mantığını tek bir yerde toplamamızı sağladı. Fonksiyonel bileşenlerin doğası gereği daha saf ve öngörülebilir olması, Hooks ile birleşince React geliştirmesini çok daha keyifli ve verimli hale getirdi. Bu sayede, daha küçük, daha odaklı ve daha kolay test edilebilir bileşenler oluşturmak mümkün hale geldi. Özellikle büyük projelerde, bu modüler yapı, ekip içi işbirliğini ve kodun bakımını önemli ölçüde kolaylaştırmaktadır.

En Temel Hook’lar: useState ve useEffect ile Tanışın

React Hooks dünyasına adım atarken karşılaşacağımız ilk ve en temel iki Hook, useState ve useEffect‘tir. Bu iki Hook, fonksiyonel bileşenlerimize durum yönetimi ve yan etki yetenekleri kazandırarak, sınıf bileşenlerinin sunduğu gücü çok daha basit ve anlaşılır bir şekilde sunar.

useState() ile Durum Yönetimi Nasıl Yapılır?

useState, fonksiyonel bileşenlerde yerel durumu yönetmek için kullanılan bir Hook’tur. Sınıf bileşenlerindeki this.state ve this.setState‘in yerini alır ancak çok daha yalın bir kullanım sunar. useState fonksiyonunu çağırdığınızda, size iki elemanlı bir dizi döndürür: mevcut durum değeri ve bu durumu güncelleyecek bir fonksiyon. Bu dizi parçalama (array destructuring) özelliği sayesinde, durum değişkenine ve onu güncelleyecek fonksiyona istediğimiz isimleri verebiliriz. Örneğin, bir sayıcı uygulaması yapmak istediğimizde, bunu şu şekilde kullanabiliriz:

import React, { useState } from 'react';

function Sayac() {
  // 'sayi' mevcut durum değeri, 'setSayi' ise onu güncelleyecek fonksiyon
  // Başlangıç değeri olarak 0 verildi.
  const [sayi, setSayi] = useState(0);

  return (
    

      
Mevcut Sayı: {sayi}
       setSayi(sayi + 1)}>Arttır
       setSayi(sayi - 1)}>Azalt
    
  );
}

export default Sayac;
    

Yukarıdaki örnekte, useState(0) çağrısı bize sayi (başlangıçta 0) ve setSayi fonksiyonunu verir. Butonlara tıklandığında, setSayi fonksiyonu çağrılarak sayi değeri güncellenir ve React, bileşeni yeniden render eder. useState ile bir nesne veya dizi gibi daha karmaşık durumları da yönetebilirsiniz. Ancak önemli bir nokta, bir nesne veya diziyi güncellerken doğrudan mutasyon yapmaktan kaçınmak ve her zaman yeni bir nesne/dizi döndürmektir. Aksi takdirde, React durumun değiştiğini algılayamayabilir ve bileşeni yeniden render etmeyebilir. Örneğin, bir nesneyi güncellerken spread operatörünü (...) kullanmak yaygın bir yaklaşımdır:

import React, { useState } from 'react';

function KullaniciProfili() {
  const [kullanici, setKullanici] = useState({ ad: 'Ali', soyad: 'Veli', yas: 30 });

  const yasiDegistir = () => {
    setKullanici(prevKullanici => ({
      ...prevKullanici, // Önceki tüm özellikleri kopyala
      yas: prevKullanici.yas + 1 // Sadece 'yas' özelliğini güncelle
    }));
  };

  return (
    

      
Ad: {kullanici.ad}
      
Soyad: {kullanici.soyad}
      
Yaş: {kullanici.yas}
      Yaşı Artır
    
  );
}

export default KullaniciProfili;
    

Bu yaklaşım, mevcut durumun güvenli bir kopyasını oluşturarak yalnızca gerekli değişiklikleri uygulamanızı sağlar. Dolayısıyla, useState ile çalışırken immutability (değiştirilemezlik) prensibini akılda tutmak performans ve beklenen davranış açısından kritik öneme sahiptir.

useEffect() ile Yan Etkileri Yönetme ve Yaşam Döngüsünü Simüle Etme

useEffect, fonksiyonel bileşenlerde yan etkileri (side effects) yönetmek için tasarlanmış güçlü bir Hook'tur. Yan etkiler, bir bileşenin UI'sının dışında gerçekleşen ve diğer sistemleri etkileyebilecek işlemlerdir. Bunlar arasında veri çekme (data fetching), DOM manipülasyonu, abonelikler (subscriptions), zamanlayıcılar (timers) ve tarayıcı API'larını kullanma gibi işlemler bulunur. useEffect, sınıf bileşenlerindeki componentDidMount, componentDidUpdate ve componentWillUnmount metodlarının işlevselliğini tek bir API altında birleştirir.

useEffect iki argüman alır: bir callback fonksiyonu ve isteğe bağlı olarak bir bağımlılıklar dizisi. Callback fonksiyonu, yan etkiyi içeren kodu barındırır. Bağımlılıklar dizisi (dependency array) ise, bu yan etkinin ne zaman yeniden çalıştırılacağını kontrol eder. Eğer bağımlılıklar dizisi boş bir dizi [] ise, useEffect yalnızca bileşen ilk yüklendiğinde (mount) bir kez çalışır ve sınıf bileşenlerindeki componentDidMount'a benzer bir davranış sergiler. Eğer bağımlılıklar dizisi hiç verilmezse, useEffect her render işleminden sonra çalışır. Eğer dizide belirli değişkenler varsa, bu değişkenlerden herhangi biri değiştiğinde useEffect yeniden çalışır. Bu sayede, yan etkileri yalnızca gerektiğinde tetikleyerek performans optimizasyonu yapabiliriz. Örneğin, harici bir API'dan veri çekme işlemi:

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

function VeriCekme() {
  const [veri, setVeri] = useState(null);
  const [yukleniyor, setYukleniyor] = useState(true);
  const [hata, setHata] = useState(null);

  // useEffect, bileşen ilk yüklendiğinde bir kez çalışacak
  // Bağımlılık dizisi boş olduğu için (componentDidMount benzeri)
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => {
        if (!response.ok) {
          throw new Error('Veri çekme hatası!');
        }
        return response.json();
      })
      .then(data => {
        setVeri(data);
        setYukleniyor(false);
      })
      .catch(error => {
        setHata(error);
        setYukleniyor(false);
      });
  }, []); // Boş bağımlılık dizisi

  if (yukleniyor) return 
Veriler yükleniyor...
;
  if (hata) return 
Hata: {hata.message}
;

  return (
    

      
Gönderi Başlığı: {veri.title}
      
{veri.body}
    
  );
}

export default VeriCekme;
    

useEffect'in bir diğer önemli özelliği ise temizlik fonksiyonudur (cleanup function). Eğer useEffect içinde bir abonelik başlattıysanız, bir zamanlayıcı kurduysanız veya bir olay dinleyicisi eklediyseniz, bileşen DOM'dan kaldırıldığında (unmount) veya yan etki yeniden çalıştırılmadan önce bu kaynakları temizlemeniz gerekir. Aksi takdirde, hafıza sızıntıları veya istenmeyen davranışlar meydana gelebilir. Bunu yapmak için, useEffect'in callback fonksiyonundan bir fonksiyon döndürürsünüz. Bu döndürülen fonksiyon, temizlik işlevini gerçekleştirir.

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

function PencereBoyutu() {
  const [genislik, setGenislik] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setGenislik(window.innerWidth);

    window.addEventListener('resize', handleResize);

    // Temizlik fonksiyonu: Bileşen kaldırıldığında olay dinleyicisini kaldırır
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Sadece ilk render'da çalışır

  return (
    
Pencere Genişliği: {genislik}px
  );
}

export default PencereBoyutu;
    

Bu örnekte, useEffect bir olay dinleyicisi ekler ve döndürülen fonksiyon, bileşen kaldırıldığında bu dinleyiciyi kaldırarak kaynakları serbest bırakır. useState ve useEffect, React Hooks'un temel taşlarıdır ve modern React uygulamalarının büyük çoğunluğunda kullanılır. Bu Hook'ları ustaca kullanarak, daha temiz, daha anlaşılır ve bakımı kolay fonksiyonel bileşenler oluşturabilirsiniz.

Gerçek Dünya Senaryosu: Bir To-Do Uygulaması ile Hooks Gücünü Keşfedin

Teorik bilgiler harika, ancak React Hooks'un gerçek dünyadaki gücünü anlamanın en iyi yolu, pratik bir örnek üzerinden gitmektir. Şimdi basit bir To-Do listesi uygulaması oluşturarak useState ve useEffect gibi temel Hook'ları nasıl bir araya getirebileceğimizi görelim. Bu uygulama, kullanıcıların yeni görevler eklemesini, mevcut görevleri tamamlandı olarak işaretlemesini ve görevleri silmesini sağlayacak.

To-Do Uygulaması İçin Temel Yapı ve useState Kullanımı

İlk olarak, uygulamamızın temel bileşenini ve gerekli durum değişkenlerini tanımlayalım. İki ana duruma ihtiyacımız olacak: yeni bir görev eklemek için kullanılacak giriş alanı değeri (yeniGorev) ve tüm görevleri tutan bir dizi (gorevler). Her görev nesnesi bir id, metin ve tamamlandi durumu içerecek.

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

function TodoUygulamasi() {
  // Yeni görev giriş alanı için state
  const [yeniGorev, setYeniGorev] = useState('');
  // Görevlerin listesi için state. Başlangıçta boş bir dizi.
  const [gorevler, setGorevler] = useState([]);

  // localStorage'dan görevleri yüklemek için useEffect
  useEffect(() => {
    const kaydedilmisGorevler = JSON.parse(localStorage.getItem('gorevler'));
    if (kaydedilmisGorevler) {
      setGorevler(kaydedilmisGorevler);
    }
  }, []); // Sadece bileşen yüklendiğinde bir kez çalışır

  // Görevler her değiştiğinde localStorage'a kaydetmek için useEffect
  useEffect(() => {
    localStorage.setItem('gorevler', JSON.stringify(gorevler));
  }, [gorevler]); // 'gorevler' state'i değiştiğinde çalışır

  // Yeni görev ekleme fonksiyonu
  const gorevEkle = (e) => {
    e.preventDefault(); // Formun varsayılan gönderimini engelle
    if (yeniGorev.trim() === '') return; // Boş görev eklenmesini engelle

    const yeniGorevObj = {
      id: Date.now(), // Benzersiz bir ID oluştur
      metin: yeniGorev,
      tamamlandi: false,
    };
    setGorevler(prevGorevler => [...prevGorevler, yeniGorevObj]);
    setYeniGorev(''); // Giriş alanını temizle
  };

  // Görev tamamlama durumunu değiştirme fonksiyonu
  const gorevTamamlandiToggle = (id) => {
    setGorevler(prevGorevler =>
      prevGorevler.map(gorev =>
        gorev.id === id ? { ...gorev, tamamlandi: !gorev.tamamlandi } : gorev
      )
    );
  };

  // Görev silme fonksiyonu
  const gorevSil = (id) => {
    setGorevler(prevGorevler => prevGorevler.filter(gorev => gorev.id !== id));
  };

  return (
    

      
Yapılacaklar Listesi
      

         setYeniGorev(e.target.value)}
          placeholder="Yeni görev ekle..."
        />
        Ekle
      
      

        {gorevler.map((gorev) => (
          

             gorevTamamlandiToggle(gorev.id)}>
              {gorev.metin}
            
             gorevSil(gorev.id)}>Sil
          
        ))}
      
    
  );
}

export default TodoUygulamasi;
    

Yukarıdaki kod bloğunda, useState Hook'unu iki farklı amaç için kullandık: biri form girişi (yeniGorev) için, diğeri ise To-Do öğeleri listesini (gorevler) tutmak için. gorevEkle, gorevTamamlandiToggle ve gorevSil fonksiyonları, setGorevler fonksiyonunu kullanarak gorevler state'ini güvenli bir şekilde günceller. Özellikle gorevTamamlandiToggle fonksiyonunda, map metodunu kullanarak ilgili görevin tamamlandi özelliğini değiştiriyoruz ve yeni bir dizi döndürerek immutability prensibine uyuyoruz. Aynı şekilde, gorevSil fonksiyonu da filter metodu ile yeni bir dizi oluşturarak istenmeyen görevi listeden çıkarıyor. Bu, React'in değişiklikleri algılaması ve UI'ı doğru bir şekilde güncellemesi için kritik öneme sahiptir.

useEffect ile Veri Saklama ve Yükleme

Uygulamamızın kapanıp açıldığında görevleri kaybetmemesi için localStorage'ı kullanalım. Bu işlem, tipik bir yan etki örneğidir ve useEffect için mükemmel bir kullanım alanıdır. İlk useEffect Hook'u, bileşen ilk yüklendiğinde localStorage'dan daha önce kaydedilmiş görevleri çeker ve gorevler state'ini bu verilerle başlatır. İkinci useEffect Hook'u ise, gorevler state'i her değiştiğinde (yani yeni bir görev eklendiğinde, tamamlandığında veya silindiğinde) görevlerin güncel listesini localStorage'a kaydeder.

/* TodoUygulamasi için basit CSS */
.todo-container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  color: #333;
}

form {
  display: flex;
  margin-bottom: 20px;
}

form input {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-right: 10px;
}

form button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

form button:hover {
  background-color: #0056b3;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.todo-list li:last-child {
  border-bottom: none;
}

.todo-list li span {
  flex-grow: 1;
  cursor: pointer;
  padding: 5px; /* Tıklama alanını genişletmek için */
}

.todo-list li.tamamlandi span {
  text-decoration: line-through;
  color: #888;
}

.todo-list li button {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.todo-list li button:hover {
  background-color: #c82333;
}

/* Mobil uyumluluk için medya sorgusu */
@media (max-width: 768px) {
  .todo-container {
    margin: 20px;
    padding: 15px;
  }
  form {
    flex-direction: column;
  }
  form input {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
    

Bu basit To-Do uygulaması, useState ve useEffect'in gücünü ve esnekliğini göstermektedir. Gördüğünüz gibi, Hooks sayesinde durum yönetimi ve yan etkileri yönetmek, sınıf bileşenlerine kıyasla çok daha temiz ve sezgisel bir hale gelmiştir. Özellikle useEffect'in bağımlılık dizisi, yan etkilerin ne zaman çalışacağını hassas bir şekilde kontrol etmemizi sağlayarak gereksiz yeniden render işlemlerini ve performans sorunlarını önler. Ayrıca, bu yapı, kodun bakımını kolaylaştırır ve gelecekte yeni özellikler eklemek için sağlam bir temel sunar. To-Do uygulamasını geliştirirken, her bir Hook'un belirli bir görevi olduğunu ve bu görevleri bağımsız olarak ele almanın kodun genel kalitesini nasıl artırdığını açıkça görebilirsiniz.

Diğer Önemli Hook'lar: useContext, useRef ve useMemo ile Performansı Artırın

React Hooks, sadece useState ve useEffect ile sınırlı değildir. React ekosisteminde geliştiricilere sunulan bir dizi başka güçlü Hook daha bulunmaktadır. Bu Hook'lar, uygulamalarınızdaki daha karmaşık senaryoları ele almanıza, bileşenler arası veri paylaşımını basitleştirmenize ve performansı optimize etmenize yardımcı olur. Şimdi bu önemli Hook'lardan bazılarına daha yakından bakalım: useContext, useRef ve useMemo.

useContext() ile Veri Paylaşımını Kolaylaştırın

Büyük uygulamalarda, verileri bir üst bileşenden alt bileşenlere prop'lar aracılığıyla iletmek bazen "prop drilling" olarak adlandırılan bir soruna yol açabilir. Yani, bir veri çok derin bir alt bileşene ulaşana kadar birçok ara bileşen üzerinden prop olarak geçmek zorunda kalır. Bu durum, kodu okunması ve bakımı zor hale getirir. useContext Hook'u, bu problemi React Context API ile birleştirerek çözer. Context API, uygulamanızın farklı yerlerinde global olarak erişilebilen verileri oluşturmanıza olanak tanır ve useContext bu verilere fonksiyonel bileşenler içinde erişmenizi sağlar.

import React, { createContext, useContext, useState } from 'react';

// 1. Bir Context oluşturun
const TemaContext = createContext(null);

// 2. Bir Provider bileşeni oluşturun
function TemaSaglayici({ children }) {
  const [tema, setTema] = useState('light'); // 'light' veya 'dark'

  const temaDegistir = () => {
    setTema(prevTema => (prevTema === 'light' ? 'dark' : 'light'));
  };

  return (
    // 'tema' değerini ve 'temaDegistir' fonksiyonunu alt bileşenlere sağlar
    
      {children}
    
  );
}

// 3. Context'i kullanan bir bileşen
function AracCubugu() {
  // useContext ile TemaContext'teki değere eriş
  const { tema, temaDegistir } = useContext(TemaContext);

  return (
    

      
Mevcut Tema: {tema}
      Temayı Değiştir
    
  );
}

// Uygulamayı birleştiren ana bileşen
function Uygulama() {
  return (
    
      
      
Bu da uygulama içeriği.
    
  );
}

export default Uygulama;
    

Bu örnekte, TemaContext adında bir bağlam oluşturduk. TemaSaglayici bileşeni, bu bağlamı kullanarak tema ve temaDegistir değerlerini tüm alt bileşenlerine sağlar. AracCubugu bileşeni ise, useContext(TemaContext) Hook'unu kullanarak bu değerlere doğrudan erişir. Bu sayede, AracCubugu'nun tema ve temaDegistir'e erişebilmesi için ara bileşenlere prop geçişi yapmamıza gerek kalmaz. useContext, özellikle kimlik doğrulama durumu, dil tercihleri veya tema ayarları gibi global verilerin yönetimi için çok kullanışlıdır.

useRef() ile DOM'a Doğrudan Erişin veya Değerleri Kalıcı Olarak Saklayın

useRef Hook'u, DOM elementlerine doğrudan referanslar oluşturmanızı veya render'lar arasında değişmeyecek kalıcı değerler saklamanızı sağlar. Sınıf bileşenlerindeki instance değişkenlerine (this.myVariable) benzer bir işlev görür ancak fonksiyonel bileşenlerde daha Hooks dostu bir yoldur. useRef, geriye bir .current özelliği olan bir nesne döndürür. Bu .current özelliği, referans verilen DOM elementine veya saklanan değere erişmek için kullanılır. useRef'in değeri güncellendiğinde bileşen yeniden render olmaz, bu da onu özellikle performans açısından hassas durumlarda veya UI güncellemesi gerektirmeyen değerler için ideal hale getirir.

import React, { useRef } from 'react';

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

  const giriseFokusla = () => {
    // .current özelliğini kullanarak input elementine doğrudan eriş
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    

      
      Girişe Fokusla
    
  );
}

export default FokusGiris;
    

Yukarıdaki örnekte, bir input elementine inputRef adında bir referans atadık. Butona tıklandığında, giriseFokusla fonksiyonu inputRef.current.focus() çağrısı ile input alanına doğrudan odaklanır. useRef, ayrıca zamanlayıcı ID'leri veya diğer referans değerleri gibi, bir bileşenin yaşam süresi boyunca aynı kalması gereken ancak render'ları tetiklememesi gereken değerleri saklamak için de kullanılabilir.

useMemo() ve useCallback() ile Performansı Artırın

React uygulamalarında performans optimizasyonu kritik öneme sahiptir. Özellikle hesaplaması pahalı fonksiyonların veya sıkça yeniden oluşturulan fonksiyonların gereksiz yere çalıştırılması, uygulamanın yavaşlamasına neden olabilir. İşte bu noktada useMemo ve useCallback Hook'ları devreye girer. Bu iki Hook, "memoization" prensibini kullanarak, belirli değerlerin veya fonksiyonların yalnızca bağımlılıkları değiştiğinde yeniden hesaplanmasını sağlar.

useMemo, hesaplaması maliyetli bir değeri önbelleğe almak için kullanılır. Callback fonksiyonunuzun sonucunu bir sonraki render'da yeniden kullanır, bu sayede aynı bağımlılıklar için aynı hesaplamanın tekrar yapılmasını engeller. Özellikle büyük listeleri filtreleme veya karmaşık veri dönüşümleri gibi durumlarda performansı artırabilir.

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

function HesaplamaComponenti() {
  const [sayi, setSayi] = useState(0);
  const [tekrar, setTekrar] = useState(0);

  // Maliyetli bir hesaplama fonksiyonu
  const pahaliHesaplama = (num) => {
    console.log('Pahalı hesaplama çalıştı...');
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
      result += num;
    }
    return result;
  };

  // useMemo ile pahalı hesaplamayı önbelleğe al
  // Sadece 'sayi' değiştiğinde yeniden çalışır
  const memoizeEdilmisDeger = useMemo(() => pahaliHesaplama(sayi), [sayi]);

  return (
    

      
Sayı: {sayi}
       setSayi(sayi + 1)}>Sayıyı Artır
      
Tekrar Sayısı: {tekrar}
       setTekrar(tekrar + 1)}>Tekrarı Artır
      
Hesaplanan Değer (Sadece Sayı Değiştiğinde Yeniden Hesaplandı): {memoizeEdilmisDeger}
    
  );
}

export default HesaplamaComponenti;
    

Bu örnekte, memoizeEdilmisDeger yalnızca sayi state'i değiştiğinde yeniden hesaplanır. tekrar state'i değiştiğinde (ki bu da bileşeni yeniden render eder), pahaliHesaplama fonksiyonu gereksiz yere tekrar çalışmaz, çünkü useMemo önceki sonucu kullanır.

useCallback ise, useMemo'ya benzer ancak bir değeri değil, bir fonksiyonu önbelleğe alır. Özellikle alt bileşenlere prop olarak geçirilen fonksiyonların gereksiz yere yeniden oluşturulmasını engellemek için kullanılır. Bu, React.memo ile optimize edilmiş alt bileşenlerin gereksiz yere yeniden render olmasını engeller, çünkü fonksiyon referansı değişmediği sürece alt bileşenler kendilerini güncel olarak algılamazlar.

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

// Sadece prop'ları değiştiğinde render olan bir alt bileşen
const ButonComponenti = React.memo(({ onClick, children }) => {
  console.log('ButonComponenti render edildi:', children);
  return {children};
});

function ParentComponent() {
  const [sayac, setSayac] = useState(0);
  const [inputDegeri, setInputDegeri] = useState('');

  // Sadece sayac değiştiğinde yeniden oluşturulacak fonksiyon
  const handleTiklama = useCallback(() => {
    setSayac(prevSayac => prevSayac + 1);
  }, []); // Bağımlılık dizisi boş, bu fonksiyon ilk render'da bir kez oluşturulur

  return (
    

       setInputDegeri(e.target.value)}
        placeholder="Bir şeyler yazın..."
      />
      
Sayaç: {sayac}
      {/* inputDegeri değişse bile ButonComponenti yeniden render olmaz
          çünkü handleTiklama fonksiyon referansı değişmiyor */}
      Sayacı Arttır
    
  );
}

export default ParentComponent;
    

Bu örnekte, ButonComponenti, React.memo ile optimize edildiği için yalnızca prop'ları değiştiğinde yeniden render olur. handleTiklama fonksiyonunu useCallback ile sarmaladığımız için, inputDegeri state'i değiştiğinde (ParentComponent yeniden render olduğunda bile) handleTiklama fonksiyonunun referansı aynı kalır. Bu da ButonComponenti'nin gereksiz yere yeniden render olmasını engeller, böylece performans artışı sağlanır. Bu Hook'lar, React uygulamalarınızın daha ölçeklenebilir ve daha performanslı olmasına yardımcı olur, ancak yalnızca gerçekten ihtiyaç duyulduğunda kullanılmaları gerektiğini unutmamak önemlidir. Aşırı kullanım, bazen gereksiz karmaşıklığa yol açabilir.

Kendi Özel Hook'larınızı Yazmak: Tekrar Kullanılabilir Mantık Nasıl Oluşturulur?

React Hooks'un en güçlü özelliklerinden biri, kendi özel Hook'larınızı (Custom Hooks) yazabilme yeteneğidir. Özel Hook'lar, bileşenler arasında tekrar kullanılabilir durumu (stateful logic) soyutlamanıza ve paylaşmanıza olanak tanıyan JavaScript fonksiyonlarıdır. Bu, uygulamanızdaki kod tekrarını azaltmanın, bileşen mantığını daha modüler hale getirmenin ve kod tabanınızın bakımını kolaylaştırmanın harika bir yoludur. Temel olarak, bir özel Hook, diğer Hook'ları (useState, useEffect, useContext vb.) içinde çağıran ve belirli bir işlevselliği kapsülleyen bir fonksiyondur.

Özel Hook Nedir ve Neden Kullanmalıyız?

Özel Hook'lar, "use" önekiyle başlayan (örneğin, useFenomenalVeriCekme veya useToggle gibi) ve tipik olarak diğer React Hook'larını çağıran fonksiyonlardır. Kendi durumunu, yan etkilerini ve diğer Hook'ların yeteneklerini kendi içinde barındırabilir. Bir özel Hook'u kullanmanızın başlıca nedenleri şunlardır:

1. Mantık Tekrarını Azaltma: Birden fazla bileşende aynı veya benzer mantığı kullanmanız gerektiğinde, bu mantığı bir özel Hook içinde kapsülleyerek kod tekrarını önlersiniz.
2. Daha Temiz Bileşenler: Özel Hook'lar sayesinde bileşenlerinizdeki mantık daha sade hale gelir, sadece UI'ı render etme sorumluluğunu taşır. İş mantığı, özel Hook içinde soyutlanır.
3. Kolay Test Edilebilirlik: Kapsüllenmiş mantık, ayrı bir fonksiyon olduğu için test edilmesi daha kolaydır.
4. Bakım Kolaylığı: Bir mantıkta değişiklik yapmanız gerektiğinde, bunu sadece özel Hook içinde yapmanız yeterli olur ve bu değişiklik Hook'u kullanan tüm bileşenlere yayılır.

Basit Bir Özel Hook Oluşturma: useToggle Örneği

Şimdi, boolean bir değeri açıp kapatmak için kullanabileceğimiz basit bir useToggle Hook'u oluşturalım. Bu Hook, bir açma/kapama durumunu ve bu durumu değiştirecek bir fonksiyonu döndürecektir.

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

// Özel Hook tanımı: useToggle
function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  // Değeri tersine çevirecek fonksiyonu useCallback ile memoize et
  // Bu sayede, bu fonksiyon referansı her render'da değişmez
  const toggle = useCallback(() => {
    setValue(prevValue => !prevValue);
  }, []); // Bağımlılıklar değişmediği sürece referansı aynı kalır

  return [value, toggle];
}

// Özel Hook'u kullanan bir bileşen örneği
function GorunurlukKontrol() {
  const [isVisible, toggleVisibility] = useToggle(true); // Başlangıç değeri true

  return (
    

      
        {isVisible ? 'Gizle' : 'Göster'}
      
      {isVisible && 
Bu metin şimdi görünüyor!
}
    
  );
}

export default GorunurlukKontrol;
    

Bu örnekte, useToggle fonksiyonu, içinde useState Hook'unu kullanarak bir value ve setValue döndürür. Ayrıca, toggle fonksiyonunu useCallback ile sarmalayarak, toggle fonksiyon referansının bileşenin her render'ında değişmesini engelledik. Bu, performans optimizasyonu açısından önemli bir yaklaşımdır, özellikle toggle fonksiyonunu alt bileşenlere prop olarak geçiriyorsanız. GorunurlukKontrol bileşeni, useToggle Hook'unu çağırarak isVisible durumuna ve toggleVisibility fonksiyonuna kolayca erişir. Bu sayede, açma/kapama mantığı bileşenin kendisinden soyutlanmış ve tekrar kullanılabilir hale gelmiştir.

Daha Karmaşık Bir Özel Hook: useFormInput Örneği

Form girişlerini yönetmek de özel Hook'lar için sıkça karşılaşılan bir senaryodur. Bir giriş alanının değerini ve değişim olayını yöneten bir useFormInput Hook'u oluşturalım:

import React, { useState } from 'react';

// Özel Hook tanımı: useFormInput
function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  // Hem değeri hem de onChange prop'unu döndürüyoruz
  return {
    value,
    onChange: handleChange,
  };
}

// Özel Hook'u kullanan bir bileşen örneği
function KullaniciFormu() {
  const isim = useFormInput('Jane');
  const soyisim = useFormInput('Doe');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(Hoş Geldiniz, ${isim.value} ${soyisim.value}!);
  };

  return (
    

      
        Ad:
         {/* spread operatörü ile value ve onChange'i aktar */}
      
      

      
        Soyad:
        
      
      

      Gönder
      
Girişler: {isim.value} {soyisim.value}
    
  );
}

export default KullaniciFormu;
    

Bu useFormInput Hook'u, her bir form girişi için ayrı ayrı useState ve handleChange fonksiyonlarını tanımlama ihtiyacını ortadan kaldırır. KullaniciFormu bileşeni, bu Hook'u birden çok kez çağırarak farklı giriş alanlarını yönetebilir ve kod tekrarını önemli ölçüde azaltır. {...isim} spread operatörü sayesinde, input elementine hem value hem de onChange prop'ları otomatik olarak aktarılır, bu da kodun daha temiz ve okunabilir olmasını sağlar. Özellikle büyük formlarla çalışırken bu tür bir özel Hook, geliştirme sürecinizi hızlandırabilir ve hata yapma olasılığınızı azaltabilir.

Özel Hook'lar, React geliştirme dünyasında güçlü bir soyutlama aracıdır. Kendi özel Hook'larınızı oluşturarak, uygulamanızın farklı yerlerinde kullanılabilecek genel ve yeniden kullanılabilir mantık parçaları inşa edebilirsiniz. Bu, React bileşenlerinizi daha okunabilir, bakımı daha kolay ve daha verimli hale getirmenin anahtarıdır.

İleri Düzey İpuçları: Performans Optimizasyonu ve Daha Fazlası

React Hooks'u kullanmaya başladığınızda, uygulamanızın performansını daha da optimize etmek ve geliştirme deneyiminizi zenginleştirmek için bazı ileri düzey ipuçlarını ve teknikleri bilmek faydalı olacaktır. Bu ipuçları, daha büyük ve karmaşık React uygulamalarında ortaya çıkabilecek sorunları öngörmenize ve çözmenize yardımcı olabilir.

1. useMemo ve useCallback'i Akıllıca Kullanın

Yukarıda bahsettiğimiz useMemo ve useCallback, performans optimizasyonu için güçlü araçlardır. Ancak, her yerde ve her zaman kullanılmaları gerektiği anlamına gelmez. Gereksiz yere bu Hook'ları kullanmak, kodunuzu daha karmaşık hale getirebilir ve memoization'ın (önbelleğe alma) getirdiği faydadan daha fazla maliyet yaratabilir. Ne zaman kullanmalısınız?

• Maliyetli Hesaplamalar: Bir fonksiyonun sonucu pahalı bir işlemden geçiyorsa ve bu işlem her render'da tekrarlanıyorsa useMemo kullanın.
• Referans Eşitliği Gerektiren Durumlar: Bir fonksiyonu veya nesneyi React.memo ile sarmalanmış alt bileşenlere prop olarak geçiriyorsanız, gereksiz yeniden render'ları önlemek için useCallback veya useMemo kullanın. Aksi takdirde, fonksiyon referansı her render'da değişeceği için alt bileşenler her zaman yeniden render olacaktır.
• useEffect Bağımlılıkları: useEffect Hook'unun bağımlılık dizisinde bir fonksiyon veya nesne kullanıyorsanız, o fonksiyonu useCallback ile veya nesneyi useMemo ile sarmalayarak gereksiz useEffect çalıştırmalarını engelleyebilirsiniz.

2. useReducer ile Karmaşık Durumları Yönetme

useState, basit durum yönetimi için harika olsa da, eğer durumunuz çok sayıda alt değer içeriyorsa veya bir sonraki durum, önceki duruma bağlı olarak karmaşık mantıkla hesaplanıyorsa, useReducer Hook'u daha uygun bir alternatif olabilir. useReducer, Redux gibi bir durum yönetim kütüphanesinin temelindeki reducer desenini React'e taşır. Size bir durum nesnesi ve bir dispatch fonksiyonu döndürür. dispatch fonksiyonunu çağırarak "eylemler" gönderirsiniz ve bu eylemler, durumun nasıl güncelleneceğini belirleyen bir reducer fonksiyonu tarafından işlenir.

import React, { useReducer } from 'react';

// Reducer fonksiyonu: durum ve eylemi alır, yeni durumu döndürür
const sayacReducer = (state, action) => {
  switch (action.type) {
    case 'ARTTIR':
      return { count: state.count + 1 };
    case 'AZALT':
      return { count: state.count - 1 };
    case 'SIFIRLA':
      return { count: 0 };
    default:
      return state;
  }
};

function SayacReducer() {
  // useReducer Hook'u: reducer, başlangıç durumu
  const [state, dispatch] = useReducer(sayacReducer, { count: 0 });

  return (
    

      
Sayı: {state.count}
       dispatch({ type: 'ARTTIR' })}>Arttır
       dispatch({ type: 'AZALT' })}>Azalt
       dispatch({ type: 'SIFIRLA' })}>Sıfırla
    
  );
}

export default SayacReducer;
    

useReducer, özellikle durum güncellemelerinin ardışık olması veya birden fazla durum değerinin birbiriyle ilişkili olması gereken durumlarda kodunuzu daha organize ve test edilebilir hale getirir. Bu, aynı zamanda, useContext ile birleştirildiğinde global durum yönetimi için de güçlü bir model sunar.

3. Kendi Özel Hook'larınızda Global Durum ve Yan Etki Yönetimi

Özel Hook'lar, basit mantıkları soyutlamanın yanı sıra, daha karmaşık durum ve yan etki yönetimi desenlerini de kapsülleyebilir. Örneğin, bir veri çekme (data fetching) mantığını tamamıyla bir özel Hook içinde saklayabilirsiniz. Bu Hook, yükleme durumu (loading state), hata durumu (error state) ve çekilen veri (data) gibi tüm ilgili durumları kendi içinde yönetebilir. Ayrıca, bu Hook'lar, useContext ile birleşerek uygulamanızın farklı yerlerinde global olarak kullanılabilecek durum ve eylemleri sağlayabilir. Bu sayede, uygulamanızın her yerinde aynı veri çekme davranışını veya ayarları tutarlı bir şekilde kullanabilirsiniz.

// useFetch.js
import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(HTTP Hata: ${response.status});
        }
        const json = await response.json();
        setData(json);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]); // URL değiştiğinde yeniden veri çek

  return { data, loading, error };
}

export default useFetch;

// Uygulama içinde kullanımı
// import useFetch from './useFetch';
// function PostList() {
//   const { data: posts, loading, error } = useFetch('https://jsonplaceholder.typicode.com/posts');

//   if (loading) return 
Gönderiler yükleniyor...
;
//   if (error) return 
Hata: {error.message}
;

//   return (
//     

//       {posts.map(post => (
//         
{post.title}
//       ))}
//     
//   );
// }
    

Yukarıdaki useFetch özel Hook'u, herhangi bir URL'den veri çekme mantığını soyutlar. Bu Hook'u, uygulamanızdaki herhangi bir bileşende kullanarak veri çekme işlemini kolayca gerçekleştirebilirsiniz. Bu, hem kod tekrarını azaltır hem de veri çekme mantığını merkezileştirerek daha tutarlı bir hata yönetimi ve yükleme durumu gösterimi sağlar.

4. CSS ve Mobil Uyumluluk İpuçları

React Hooks doğrudan CSS ile ilgili olmasa da, modern React uygulamalarının mobil uyumlu olması esastır. React ile geliştirme yaparken, stil verme yöntemleri arasında CSS modülleri, Styled Components veya Tailwind CSS gibi kütüphaneler popülerdir. Ancak, temel prensip olan medya sorguları (media queries) ve esnek layout'lar her zaman geçerlidir. Örneğin, CSS'inizde şu şekilde bir medya sorgusu kullanarak farklı ekran boyutlarına göre düzeninizi ayarlayabilirsiniz:

.container {
  padding: 20px;
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .container {
    padding: 15px;
  }
  .sidebar {
    display: none; /* Küçük ekranlarda sidebar'ı gizle */
  }
  .main-content {
    width: 100%; /* Ana içeriği tam genişlik yap */
  }
}

@media (max-width: 480px) {
  .button {
    font-size: 14px;
    padding: 8px 12px;
  }
}
    

Hooks'un getirdiği modüler yapı sayesinde, belirli bir bileşenin mobil davranışını yöneten Hook'lar bile yazabilirsiniz. Örneğin, useWindowSize gibi bir özel Hook, pencere boyutunu izleyebilir ve bileşenlerinizin bu boyutlara göre dinamik olarak stil veya düzen değiştirmesini sağlayabilir. Bu, kullanıcı deneyimini iyileştiren ve uygulamanızı farklı cihazlarda daha erişilebilir kılan önemli bir yaklaşımdır. Sonuç olarak, bu ileri düzey ipuçları ve teknikler, React Hooks ile geliştirdiğiniz uygulamaların sadece işlevsel değil, aynı zamanda performanslı, bakımı kolay ve kullanıcı dostu olmasını sağlayacaktır. Hooks, modern web geliştirme ihtiyaçlarına yanıt veren güçlü ve esnek bir araç setidir.

Sonuç: React Hooks Geleceği ve Sıkça Sorulan Sorular

React Hooks, React geliştirme paradigmasını kökten değiştiren, daha temiz, daha işlevsel ve daha esnek kod yazmamızı sağlayan devrim niteliğinde bir özelliktir. Bu makale boyunca, Hooks'un temel prensiplerinden başlayarak (useState ve useEffect), gerçek dünya uygulamalarına (To-Do listesi), daha gelişmiş Hook'lara (useContext, useRef, useMemo) ve kendi özel Hook'larınızı oluşturmanın gücüne kadar geniş bir yelpazeyi ele aldık. Gördük ki Hooks, sınıf bileşenlerinin getirdiği karmaşayı (this bağlama, yaşam döngüsü metodlarının dağılması) ortadan kaldırarak, fonksiyonel programlamanın sade ve güçlü yönlerini React'e entegre ediyor. Bu sayede, bileşen mantığını daha kolay anlaşılır ve test edilebilir bir şekilde soyutlayabiliyoruz.

Özellikle useEffect'in getirdiği yan etki yönetimindeki iyileşmeler, sınıf bileşenlerindeki yaşam döngüsü metodlarının karışık doğasına bir çözüm sunuyor. Artık ilgili mantıkları bir arada tutarak kodun daha düzenli olmasını sağlıyoruz. Özel Hook'lar ise, tekrar kullanılabilir mantık parçaları oluşturmanın ve kod tekrarını azaltmanın anahtarıdır; bu da büyük ve ölçeklenebilir uygulamalar için vazgeçilmez bir özelliktir. React topluluğu, Hooks'u hızla benimsemiş ve çevresinde zengin bir ekosistem geliştirmiştir, bu da Hooks'un uzun vadeli geleceğinin parlak olduğunu göstermektedir. React'in gelecekteki yenilikleri (örneğin Concurrent Mode ve Suspense) Hooks ile daha da uyumlu hale gelecektir, bu da Hooks'un önemini daha da artıracaktır.

Özetle, React Hooks, sadece bir "özellik" olmanın ötesinde, React'in gelecekteki gelişim yönünü şekillendiren temel bir paradigmadır. Onları anlamak ve etkili bir şekilde kullanmak, her React geliştiricisi için modern uygulamalar inşa etmenin olmazsa olmaz bir parçası haline gelmiştir. Bu araçları ustalıkla kullanarak, daha hızlı, daha güvenilir ve bakımı daha kolay web uygulamaları geliştirebilirsiniz.

Sıkça Sorulan Sorular (SSS)

• S: React Hooks'u mevcut sınıf bileşenleriyle birlikte kullanabilir miyim?

  C: Evet, kesinlikle! React Hooks'u mevcut sınıf bileşenleriyle aynı projede sorunsuz bir şekilde kullanabilirsiniz. React ekibi, Hooks'u adım adım geçişi kolaylaştırmak için tasarladı. Bir sınıf bileşenini tamamen fonksiyonel bir bileşene dönüştürmek zorunda değilsiniz. Yeni özellikler veya bileşenler eklerken Hooks'u kullanmaya başlayabilir, zamanla eski sınıf bileşenlerinizi dönüştürebilirsiniz.

• S: Hangi Hook'u ne zaman kullanmalıyım?

  C: Temelde:

  • useState: Basit, yerel durumları (string, number, boolean, array, object) yönetmek için.
  • useEffect: Yan etkileri (veri çekme, DOM manipülasyonu, olay dinleyicileri, abonelikler, zamanlayıcılar) yönetmek için. Yaşam döngüsü metodlarını (mount, update, unmount) simüle eder.
  • useContext: Prop drilling'i önlemek ve global verilere (tema, kullanıcı bilgisi) kolayca erişmek için.
  • useRef: DOM elementlerine doğrudan erişmek veya render'lar arasında değişmeyecek kalıcı değerler saklamak için.
  • useMemo ve useCallback: Performans optimizasyonu için, pahalı hesaplamaları (useMemo) veya fonksiyon referanslarını (useCallback) önbelleğe almak için.
  • useReducer: Karmaşık durum mantığını yönetmek veya Redux benzeri bir desenle çalışmak için.
  • Kendi Özel Hook'larınız: Tekrar kullanılabilir mantıkları (veri çekme, form yönetimi, pencere boyutu izleme vb.) soyutlamak ve paylaşmak için.
• S: Hooks'u kullanırken dikkat etmem gereken temel kurallar nelerdir?

  C: React Hooks'un iki ana kuralı vardır:

  1. Sadece React Fonksiyonlarının En Üst Seviyesinde Çağırın: Hooks'u döngülerin, koşulların veya iç içe fonksiyonların içinde çağırmayın. Her zaman bir React fonksiyon bileşeninin veya özel bir Hook'un en üst seviyesinde çağırın. Bu, React'in Hook'ları doğru sırada izlemesini sağlar.
  2. Sadece React Fonksiyonlarından Çağırın: Hooks'u sadece fonksiyonel React bileşenlerinden veya diğer özel Hook'lardan çağırabilirsiniz. Sıradan JavaScript fonksiyonlarından Hooks'u çağıramazsınız.

  Bu kurallar, Hooks'un tutarlı bir şekilde çalışmasını ve React'in bileşenlerinizin durumunu doğru bir şekilde yönetmesini sağlamak için kritik öneme sahiptir.

• S: Hooks sınıf bileşenlerinin yerini tamamen alacak mı?

  C: React ekibi, sınıf bileşenlerini React'ten kaldırma planları olmadığını açıkça belirtmiştir. Mevcut sınıf bileşenleri çalışmaya devam edecek ve bakımları yapılacaktır. Ancak, yeni projelerde veya mevcut projelerde yeni özellikler geliştirirken fonksiyonel bileşenler ve Hooks kullanmak, React'in önerilen yoludur. Hooks, React'in geleceği için tasarlanmış bir yaklaşım olduğundan, yeni geliştiricilerin bu paradigmayı benimsemesi önemlidir.