React Hooks

React Hooks, React 16.8 sürümüyle birlikte tanıtılan bir özelliktir. Hooks, fonksiyonel komponentlerde state ve diğer React özelliklerini kullanmamızı sağlar. Bu bölümde, React Hooks'i ayrıntılı olarak ele alacak ve nasıl kullanıldığını öğreneceğiz.

useState Hook'u

useState Hook'u, fonksiyonel komponentlerde state yönetimi için kullanılır. Bir state değeri ve onu güncellemek için bir fonksiyon döndürür. Bu sayede, state yönetimini sınıf komponentlerinde olduğu gibi kullanabiliriz.

import React, { useState } from "react";
 
function Counter() {
  const [count, setCount] = useState(0);
 
  const increment = () => {
    setCount(count + 1);
  };
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
 
export default Counter;

useState Hook'u, count adında bir state değeri ve setCount adında bir state güncelleme fonksiyonu döndürür. Fonksiyon içinde setCount, mevcut count değerini güncelleyerek sayacın artmasını sağlar.

useEffect Hook'u

useEffect Hook'u, yan etkileri (API çağrıları, abonelikler, DOM manipülasyonu vb.) işlemek için kullanılır. İlgili kod, bileşenin her render edilişinde veya belirli bağımlılıklar değiştiğinde çalışır.

import React, { useState, useEffect } from "react";
 
function DataFetcher() {
  const [data, setData] = useState([]);
 
  useEffect(() => {
    fetchData();
  }, []);
 
  const fetchData = async () => {
    const response = await fetch("https://api.example.com/data");
    const result = await response.json();
    setData(result);
  };
 
  return (
    <div>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}
 
export default DataFetcher;

useEffect Hook'u, fetchData fonksiyonunu bileşenin ilk render edilmesinden sonra çalıştırmak için kullanır. Bu örnekte, bir API'ye istek yapılır ve elde edilen veriler data state'ine kaydedilir.

^^Diğer React Hooks

useState ve useEffect, sadece React Hooks örneklerinin birkaç tanesidir. React, bir dizi farklı Hook sağlar. İşte bazı yaygın kullanılan diğer React Hooks örnekleri:

• useContext: Context API'ye erişmek ve paylaşılan verilere erişim sağlamak için kullanılır.
• useRef: DOM düğümlerine veya React bileşenlerine referans oluşturmak için kullanılır.
• useReducer: Karmaşık state yönetimi için kullanılır ve Redux benzeri bir yapı sunar.
• useCallback: Fonksiyon referanslarını önbelleğe almak ve gereksiz yeniden oluşturulmayı önlemek için kullanılır.
• useMemo: İşlem maliyetli hesaplamaları önbelleğe almak için kullanılır.
• useEffect: Yaşam döngüsü olaylarına karşılık gelen davranışları sağlamak için kullanılır.

Bu örnekler, React Hooks dünyasında sadece birkaç tanesini temsil eder. Daha fazla bilgi ve kullanım örnekleri için React resmi dokümantasyonuna başvurabilirsiniz.