React Hooks Kuralları (Rules of Hooks)

React Hooks, React'ın fonksiyonel bileşenlerle ilgili yeniliklerinden biridir. Hooks, React uygulamalarınızda durum yönetimi ve yan etkiler gibi bazı önemli özellikleri kullanabilmenizi sağlar. Bu blog yazısında, React Hooks'un temel kurallarını ve bu kuralları nasıl uygulayabileceğinizi göstereceğiz. Ayrıca, örneklerle kuralların nasıl çalıştığını göstereceğiz.

1. Sadece React Fonksiyonlarının Üst Düzeyinde Hooks Kullanın

Hooks kullanırken dikkat etmeniz gereken ilk kural, Hooks'ları yalnızca React fonksiyonlarının en üst düzeyinde kullanmaktır. Yani, döngüler, koşullu ifadeler veya iç içe fonksiyonlar içinde Hooks kullanmaktan kaçınmalısınız. Bu, React'in Hooks çağrılarını doğru sırayla takip etmesini ve durumu doğru bir şekilde yönetmesini sağlar.

Örnek:

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;

    return () => {
      document.title = 'React App';
    };
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <p>Count: {count}</p>
    </div>
  );
}

export default Counter;

Yukarıdaki örnekte, useState ve useEffect Hooks'ları doğrudan fonksiyon bileşeni içinde ve en üst düzeyde kullanılır.

2. Yalnızca React Fonksiyonlarından Hooks Kullanın

Hooks'ları yalnızca React fonksiyon bileşenlerinde veya özel Hooks'larda kullanmalısınız. Normal JavaScript fonksiyonları içinde Hooks kullanmaktan kaçının.

Örnek:

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

function useDocumentTitle(title) {
  useEffect(() => {
    document.title = title;

    return () => {
      document.title = 'React App';
    };
  }, [title]);
}

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

  useDocumentTitle(`Count: ${count}`);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <p>Count: {count}</p>
    </div>
  );
}

export default Counter;

Yukarıdaki örnekte, özel bir Hook olan useDocumentTitle oluşturduk. Bu Hook, useEffect Hook'unu kullanır ve yalnızca React fonksiyon bileşeni olan Counter içinde çağrılır.

3. Özel Hooks İsimlendirmesi: "use" İle Başlayan İsimler Kullanın

React Hooks, kullanıcıların kendi özel Hooks'larını oluşturmasına olanak tanır. Bu özel Hooks'lar, genellikle belirli işlevleri kapsüllemek veya tekrar kullanılabilir mantığı paylaşmak için kullanılır. Özel Hooks oluştururken, isimlendirmeye dikkat etmek önemlidir. İyi bir uygulama, özel Hooks'ların adının use ile başlamasını sağlamaktır. Bu, Hooks'un doğru kullanıldığından emin olmanıza ve kodunuzun okunabilirliğini artırmanıza yardımcı olur.

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

function useCustomCounter(initialValue) {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return { count, increment, decrement };
}

function Counter() {
  const { count, increment, decrement } = useCustomCounter(0);

  return (
    <div>
      <button onClick={increment}>Increase Count</button>
      <button onClick={decrement}>Decrease Count</button>
      <p>Count: {count}</p>
    </div>
  );
}

export default Counter;

Yukarıdaki örnekte, useCustomCounter adında bir özel Hook oluşturduk. Bu Hook, sayaç işlemleri için tekrar kullanılabilir mantığı içerir ve useState Hook'unu kullanır. use öneki, bu fonksiyonun bir Hook olduğunu ve React Hooks kurallarına uygun kullanılması gerektiğini belirtir.

React Hooks kurallarına uyarak, uygulamanızın düzgün ve hızlı bir şekilde çalışmasını sağlayabilirsiniz. Başarıyla kurulan Hooks, React uygulamalarınızın ölçeklenebilirliğini, okunabilirliğini ve bakımını kolaylaştırır. Bu nedenle, Hooks kullanırken bu iki temel kuralı dikkate alarak uygulamanızın doğru çalışmasını sağlayın.