React Hooks: Modern Bileşen Geliştirme Yöntemleri

React Hooks, fonksiyonel bileşenlerde durum (state) ve yaşam döngüsü (lifecycle) özelliklerini kullanmamıza olanak tanır. Sınıf tabanlı bileşenlere ihtiyaç duymadan modern ön yüz kodları yazmamızı kolaylaştırır.

Temel Hooks

1. useState

Durum yönetimini fonksiyonel bileşenlere getirir:

import { useState } from 'react';

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

  return (
    <div>
      <p>Sayaç: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Arttır
      </button>
    </div>
  );
}

2. useEffect

Yan etkileri (side effects) yönetmemizi sağlar. API istekleri, abonelikler veya DOM güncellemeleri burada yapılır:

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(data => setUser(data));
    
    return () => {
      // Temizleme işlemleri (cleanup)
    };
  }, [userId]);

  return <div>Kullanıcı: {user?.name}</div>;
}

Özel Hooks (Custom Hooks)

Tekrarlayan mantıkları soyutlamak için kendi kancalarınızı oluşturabilirsiniz:

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

Performans İyileştirme: useCallback ve useMemo

Gereksiz render işlemlerini engellemek için fonksiyonları ve hesaplanan değerleri önbelleğe alırız:

• useCallback: Fonksiyon referansını korur.
• useMemo: Ağır hesaplamaların sonucunu saklar.

Sonuç

React Hooks, bileşen kodlarını kısaltır, mantıksal ayrımı kolaylaştırır ve çok daha performanslı arayüzler geliştirmemize olanak tanır.