React ‘hook’ nedir ve ne için kullanılır?

React hook, React JavaScript kitaplığındaki bir özelliktir. Hook’lar, sınıf bileşenlerine ihtiyaç duymadan, fonksiyon bileşenlerinde durum (state) ve diğer React özelliklerini kullanmaya olanak tanır. İlk olarak React 16.8 sürümüyle tanıtılmışlardır ve React’ın işlevsel programlamaya yönelik bir adımıdır.

React Hook’lar, React’ın özgün bir özelliği olarak ortaya çıkmıştır ve özellikle React’ın fonksiyonel bileşenleri ile kullanılır. Ancak, “hook” kavramı geniş bir programlama kavramıdır ve farklı bağlamlarda ve dillerde farklı anlamlara gelebileceği unutulmamalıdır.

- ADT Çözümleri -

Advanced Dynamics Teknoloji'de işletmeler için dış kaynaktan hizmet modeliyle Yönetilen Hizmetler çözümleri sunuyoruz.

React, ilk çıktığında sınıf bazlı bileşenlerle tanıtıldı. Bu bileşenler, JavaScript’te class söz dizimini kullanarak oluşturuluyor ve React’ın yaşam döngüsü metodları (örneğin, componentDidMount, componentDidUpdate vb.) ile birlikte geliyordu. Ancak, bu yaklaşımın bazı dezavantajları vardı. React 16.8 ile birlikte, React ekibi Hook’ları tanıttı. Bu yeni özellik, React’ın fonksiyonel programlama yaklaşımına daha fazla yönlenmesini sağladı.

Neden kullanılır?

Hook’lar sayesinde, artık durum (state) ve diğer React özellikleri, sınıf bileşenleri olmadan da kullanılabiliyordu. Bu, fonksiyonel bileşenleri daha güçlü ve esnek hale getirdi. Özel hook’lar sayesinde, bileşenler arası mantık paylaşımı daha kolay ve verimli hale geldi. Hook’ların kullanımı, this anahtar kelimesine olan ihtiyacı ortadan kaldırdı ve kodları daha sade ve anlaşılabilir hale getirdi. Hook’lar ayrıca, bileşenlerin daha iyi organize edilmesine ve potansiyel performans iyileştirmelerine olanak tanıdı.

React Hook’lar, birkaç temel amaca hizmet eder ve React uygulamalarında önemli avantajlar sağlar. Örneğin:

1. Durum Yönetimi (State Management): useState Hook’u, sınıf bileşenlerine ihtiyaç duymadan, fonksiyon bileşenlerinde yerel durum (state) yönetimi yapmayı mümkün kılar. Bu, durumun bileşen içinde saklanmasını ve güncellenmesini kolaylaştırır.
2. Yan Etkilerin Yönetimi (Managing Side Effects): useEffect Hook’u, bileşenlerin yaşam döngüsüne (mounting, updating, unmounting) entegre edilmiş yan etkileri yönetmeye olanak tanır. API çağrıları, abonelikler ve manuel DOM işlemleri gibi yan etkiler bu Hook aracılığıyla kontrol edilebilir.
3. Context API Kullanımı: useContext Hook’u, Context API ile oluşturulan bağlam (context) değerlerine erişimi kolaylaştırır. Bu, bileşenler arası veri aktarımını ve paylaşımını basitleştirir.
4. Performans Optimizasyonu: useCallback ve useMemo Hook’ları, gereksiz yeniden hesaplamaları ve fonksiyon oluşturmayı önleyerek performans optimizasyonu sağlar. Bu, özellikle büyük ve karmaşık uygulamalarda önemli bir avantajdır.
5. Karmaşık Durum Mantığını Yönetme: useReducer Hook’u, daha karmaşık durum mantığını yönetmek için kullanılır. Redux’taki reducer mantığına benzer şekilde çalışır ve durum güncellemelerini daha öngörülebilir kılar.
6. Özelleştirilebilirlik ve Tekrar Kullanılabilirlik: Kendi özel Hook’larınızı oluşturabilirsiniz, böylece tekrar kullanılabilir, temiz ve modüler kod parçaları yaratılabilir. Bu, uygulamanın genelinde tutarlılık ve bakım kolaylığı sağlar.

Örneklerle React hook’lar

Yukarıda bahsedilen hook’ları biraz daha detaylandıralım ve örneklerle açıklamaya çalışalım.

• useState: Bileşen içinde durum (state) yönetimi sağlar. Değişkenlerin değerlerini saklamak ve güncellemek için kullanılır.

function HelloComponent() {
  const [name, setName] = useState("Dünya");

  return (
    <div>
      Merhaba, {name}!
      <button onClick={() => setName("React")}>İsmi Değiştir</button>
    </div>
  );
}

Bu örnekte HelloComponent adında bir bileşen görüyorsunuz. Bu bileşen, ekrana bir mesaj yazdırır ve bir buton içerir. Butona tıklandığında, mesajdaki isim “React” olarak değişir. Bu, useState Hook’unun kullanımına bir örnektir.

Aşağıdaki bir başka örnekte, basit bir sayac bileşeni oluşturuyoruz:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Şu anki sayı: {count}</p>
      <button onClick={() => setCount(count + 1)}>Arttır</button>
      <button onClick={() => setCount(count - 1)}>Azalt</button>
    </div>
  );
}

export default Counter;

Bu kod, bir sayacın değerini tutar ve arttırmak veya azaltmak için iki buton sağlar.

• useEffect: Bileşenin yaşam döngüsüne (mount, update, unmount) müdahale etmeyi sağlar. Dış kaynaklardan veri çekme, abonelikler ve manuel DOM güncellemeleri gibi işlemler için kullanılır.

useEffect Hook’u, yan etkileri (örneğin, API çağrıları) yönetmek için kullanılır. Aşağıdaki örnekte, bir API’den veri çekiyoruz:

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

function UserData() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then(response => response.json())
      .then(data => setUser(data));
  }, []); // Boş dizi, bu efektin sadece bileşen mount edildiğinde çalışacağını belirtir

  if (!user) return "Yükleniyor...";

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default UserData;

Bu örnek, bir kullanıcının verilerini bir API’den çeker ve ekranda gösterir.

• useContext: Context API ile oluşturulan bağlamı (context) kullanmaya yarar. Bileşenler arası veri paylaşımını kolaylaştırır.

Aşağıdaki örnekte, temayı değiştiren bir context kullanıyoruz:

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

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function Button() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Temayı Değiştir: {theme}
    </button>
  );
}

function App() {
  return (
    <ThemeProvider>
      <div>
        <Button />
      </div>
    </ThemeProvider>
  );
}

export default App;

Bu örnek, bir düğme aracılığıyla uygulamanın temasını değiştiren bir ThemeContext oluşturur ve kullanır.

Diğer yaygın hook’lar şu şekildedir:

• useReducer: Karmaşık durum mantığını yönetmek için useState‘in alternatifi olarak kullanılır. Redux’a benzer bir şekilde çalışır.
• useCallback: Performans optimizasyonu için fonksiyonları yeniden oluşturmamak adına kullanılır.
• useMemo: Hesaplamalı değerlerin yeniden hesaplanmasını önlemek için kullanılır.

Bu hook’lar, daha temiz ve anlaşılır kod yazmayı, yan etkileri ve durum yönetimini daha iyi kontrol etmeyi sağlar. Bunların dışında özelleştirilmiş (custom) Hooks da oluşturulabilir, bu sayede tekrar kullanılabilir ve modüler kod parçaları yaratılabilir.