Custom Hooklar: React'te Tekrarlayan Mantığı Yeniden Kullanmak

React, bileşenler arasında tekrarlayan mantığı yeniden kullanılabilir hale getirmek için özel bir yol sunar. Custom Hook'lar, mevcut hook'ların (örn. useState, useEffect) birleşiminden oluşur ve aynı mantığı birden fazla bileşende tekrar tekrar kullanmanızı sağlar. İhtiyacınız için tasarlanabilir olan bu hooklar'da data çekebilir, bir bloğun yorumları için özel bir hook yazabilir, siteniz için koyu tema özelliğini kolayca getirebilirsiniz. Bu yazıda ise, custom hook'ların ne olduğunu, neden kullanıldığını ve nasıl oluşturulduklarını ele alacağız. Ayrıca, API istekleri yapan bir custom hook örneği ile konuyu pekiştireceğiz. Gelin basitce Custom Hook kavramı nedir ona bakalım.

Custom Hook Nedir?

Custom Hook, Basitçe JavaScript fonksiyonlarıdır ve genel kurala göre use ile başlamaları önerilir. Bu, React'e bunun bir hook olduğunu bildirir. Custom Hook'lar, React hook'larını kullanarak içlerinde state ve yan etkileri (side effects) yönetebilirler. Bu sayede, aynı mantığı birden fazla bileşende kolayca yeniden kullanabilirsiniz.

Neden Custom Hook Kullanılır?

1. Kod Tekrarını Azaltma:

• Custom Hook'lar, tekrarlayan mantığı bir kez yazarak, aynı mantığı birden fazla bileşende kullanmanıza olanak tanır.

1. Kodu Modülerleştirme:

• Bileşenlerinizi daha küçük, yönetilebilir ve anlaşılır hale getirir. Tekrarlanan mantığı bileşenlerden çıkararak, her bileşenin sadece kendi özel mantığıyla ilgilenmesini sağlar.

1. Kolay Test Edilebilirlik:

• Custom Hook'lar, bağımsız fonksiyonlar oldukları için, onları test etmek daha kolaydır.

Custom Hooklarla ilgili örneğimize göz atalım

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);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, loading, error };
}

export default useFetch;

Bu custom hook, verilen bir URL'e HTTP GET isteği yapar ve yanıt olarak dönen veriyi, yüklenme durumunu ve olası hataları yönetir.

import Header from "./components/Header";
import useCustomHook from "./hooks/useCustomHook";
import useFetchData from "./hooks/useFetchData";


function App() {

  const value = useCustomHook();
  const { data, loading, error } = useFetchData('https://jsonplaceholder.typicode.com/posts');
  console.log(data);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  
  return (
    <div className="App">
        <h1>Fetched Data</h1>
        <ul>
          {data.map((item, index) => (
            <li key={index}>
              <p><strong>ID:</strong> {item.id}</p>
              <p><strong>Name:</strong> {item.body}</p>
              <p><strong>Description:</strong> {item.title}</p>
            </li>
          ))}
        </ul>
    </div>
  );
}

export default App;

Bu örnekte, useCustomHook hook'u ile bir API'ye istek yaparak veri çekiyor ve bu verileri App bileşenine sağlıyoruz. Hook'un döndürdüğü data, loading ve error durumlarını kullanarak bileşenin render sürecini yönetiyoruz. Çekilen verileri daha düzenli bir şekilde listelemek için her öğenin ID, isim ve açıklama bilgilerini listeledik.

Sonuç

Custom Hook'lar, React'te tekrarlayan mantığı yeniden kullanmanın ve kodu daha modüler hale getirmenin güçlü bir yoludur. Custom Hook'lar sayesinde, bileşenler arasında ortak işlevselliği paylaşabilir ve kod tekrarını en aza indirebilirsiniz. Bu, hem kodun okunabilirliğini hem de bakımını kolaylaştırır. API istekleri yapan bir custom hook örneğiyle gördüğümüz gibi, custom hook'lar gerçek dünya uygulamalarında oldukça kullanışlıdır. React uygulamalarınızda daha temiz ve etkili bir kod tabanı oluşturmak için custom hook'ları kullanmaya başlayabilirsiniz.