React'ta Custom Hook'larla Mantık Tekrarını Önleme ve En İyi Kullanım Yöntemleri

Modern web geliştirmede, tekrar eden kodlar yazılımın sürdürülebilirliğini ve bakımını zorlaştırır. React ile geliştirilen projelerde bu sorunun en etkili çözüm yollarından biri, custom hook kullanımıdır. Bu yazımızda, custom hook'ların ne olduğu, hangi durumlarda kullanılacağı ve React uygulamalarında kod tekrarını nasıl önlediğine dair teknik ve teknik olmayan tüm detayları bulabilirsiniz. Kompanse Yazılım'ın profesyonel projelerindeki tecrübelerinden de örneklerle, custom hook'ların gerçek hayattaki değerine dokunacağız.

Custom Hook Nedir ve Neden Kullanılır?

React, fonksiyonel komponent mimarisine geçişle birlikte Hooks API'sini sundu. Hooks ile komponentlerde state yönetimi, yan etkiler gibi işlemler daha kolay yönetilebiliyor. Ancak bazı durumlarda, aynı mantığı birden fazla komponentte kullanmak gerekebiliyor. Bu noktada, custom hook'lar devreye giriyor. Custom hook, bir veya birden fazla React hook'unun birleşiminden oluşan, kendi işlevselliğimizi kapsüllediğimiz ve projede tekrar tekrar kullanabildiğimiz özel fonksiyonlardır.

Custom Hook Kullanmanın Avantajları

Kod Tekrarını Azaltır: Aynı mantığı farklı komponentlerde yeniden yazmak yerine, bir custom hook olarak tanımlar ve ihtiyacınız olduğunda kullanırsınız.
Okunabilirliği Artırır: Komponentleriniz daha sade ve anlaşılır olur. Mantık ayrı bir dosyada kapsüllenmiş olur.
Test Edilebilirlik: Custom hook'lar izole fonksiyonlar olduğu için ayrı ayrı kolayca test edilebilirler.
Sürdürülebilirlik: Proje büyüdükçe kodun bakımı kolaylaşır; güncellemeler merkezi bir noktadan yapılabilir.

React'ta Built-in Hook'lar ve Custom Hook'lar Arasındaki Fark

React, yerleşik hook'lar ile başlar: useState, useEffect, useContext gibi. Bunlar temel işlevleri sağlar. Ancak, birden fazla hook'u bir arada ve belli bir mantık çerçevesinde kullanmanız gerektiğinde custom hook yazmak kaçınılmazdır.

Yerleşik Hook Örnekleri

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

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

  useEffect(() => {
    document.title = `Tıklama sayısı: ${count}`;
  }, [count]);

  return (
     setCount(count + 1)}>
      Say: {count}
    
  );
}

Custom Hook ile Mantık Tekrarını Önleme

Örneğin, hem bir kullanıcı listesi hem de bir ürün listesi komponentinde uzaktan veri çekme mantığı kullanmak istiyorsunuz. Bu mantığı her komponentte kopyalamak yerine, bir custom hook yazabilirsiniz.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then((res) => {
        if (!res.ok) {
          throw new Error('Veri çekilemedi');
        }
        return res.json();
      })
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((err) => {
        setError(err);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

Bu useFetch hook'u, veri çekme mantığını kapsüller ve farklı komponentlerde tekrar tekrar kullanılabilir hale getirir.

Custom Hook Yazarken Dikkat Edilmesi Gerekenler

Custom hook'ların ismi use ile başlamalıdır. (örn. useAuth, useWindowSize)
Sadece React hook'larını çağırmak için değil, arka planda iş mantığı kapsüllemek için de kullanılabilir.
Hook içinde başka hook'lar çağrılabilir, fakat koşullu olarak çağrılmamalıdır. Her render'da aynı sırayla çalışmalıdır.
Custom hook'lar, bağımlılıkları props olarak alabilir.

Gerçek Hayattan Kullanım Senaryoları

Kompanse Yazılım olarak geliştirdiğimiz projelerde custom hook'lar sayesinde hem performans hem de sürdürülebilirlik açısından ciddi kazanımlar elde ettik. Özellikle büyük ölçekli React projelerinde, sayfa başına ondan fazla custom hook kullanımı ile tüm veri yönetimi ve iş mantığı tek bir yerde toplanarak, ekip içi iş bölümü ve kod bakımı kolaylaştırıldı.

Örnek: Pencere Boyutunu İzleyen Custom Hook

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });

  useEffect(() => {
    function handleResize() {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    }
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

Bu custom hook, farklı komponentlerde pencere boyutuna göre dinamik davranışlar sergilemek için kullanılabilir.

Custom Hook'ların Test Edilmesi

Custom hook'lar izole fonksiyonlar olduğu için kolayca test edilebilirler. React Testing Library ve Jest gibi araçlarla, hook'ların döndürdüğü değerler ve davranışlar rahatlıkla test edilebilir. Bu da projenizin hata oranını düşürür ve geliştirme sürecini hızlandırır.

Custom Hook'larla İlgili Sıkça Sorulan Sorular

1. Custom hook'lar performansı etkiler mi?

Doğru kullanıldığında custom hook'lar performans kaybı yaratmaz, hatta kodun tek bir merkezde toplanmasını sağladığı için optimizasyonu kolaylaştırır.

2. Custom hook'lar paylaşılabilir mi?

Evet, custom hook'lar bağımsız paketler halinde paylaşılabilir ve açık kaynak projelerde sıkça kullanılır.

3. Ne zaman custom hook yazmalıyım?

Aynı mantığı birden fazla komponentte kullanmaya başladığınız anda custom hook yazmak doğru bir yaklaşımdır.

Sonuç: React Projelerinde Custom Hook Kullanımının Önemi

React projelerinde custom hook'lar, tekrarlayan kodların önüne geçerek uygulamanın daha sürdürülebilir, okunabilir ve test edilebilir olmasını sağlar. Kompanse Yazılım olarak, büyük ölçekli projelerde custom hook'ların gücünden faydalanarak müşterilerimize kaliteli ve sürdürülebilir çözümler sunmaya devam ediyoruz. Siz de projelerinizde custom hook'ları aktif olarak kullanarak, yazılım kalitenizi bir üst seviyeye taşıyabilirsiniz.