React Özel (Custom) Hook Kullanımı

React Özel (Custom) Hook Kullanımı

Özel (Custom) Hook

Özel (custom) hook'lar, mevcut React hook'larını bir araya getirerek karmaşık durum mantığı, yan etkiler veya diğer React özelliklerini yeniden kullanılabilir birimler halinde organize etmeyi sağlar. Özel hook'lar, use öneki ile başlayan fonksiyonlar olarak tanımlanır ve içerisinde bir veya birden fazla React hook'u kullanabilir.

Kullanımı

Özel bir hook oluşturmak için, sadece bir fonksiyon tanımlamanız ve bu fonksiyonun adını use ile başlatmanız yeterlidir. Bu fonksiyon, diğer React hook'larını kullanabilir ve bir değer döndürebilir.

function useCustomHook(param1, param2) {
// Diğer React hook'ları burada kullanılabilir
// ...
return someValue; // Bir değer döndürebilir
}

Örnek

Aşağıda, bir sayacın değerini artıran ve azaltan bir özel hook örneği verilmiştir:

import { useState, useCallback } from 'react';
function useCounter(initialValue = 0) {
const [count, setCount] = useState(initialValue);
const increment = useCallback(() => {
setCount(prevCount => prevCount + 1);
}, []);
const decrement = useCallback(() => {
setCount(prevCount => prevCount - 1);
}, []);
return { count, increment, decrement };
}

Bu özel hook'u kullanarak bir bileşen oluşturabiliriz:

import React from 'react';
function Counter() {
const { count, increment, decrement } = useCounter(0);
return (
<div>
<button onClick={decrement}>-</button>
{count}
<button onClick={increment}>+</button>
</div>
);
}

Dikkat Edilmesi Gerekenler

• Özel hook'lar yalnızca fonksiyon bileşenleri veya diğer özel hook'lar içinde çağrılabilir.
• Özel hook'lar, React'ın hook kurallarına uymalıdır. Örneğin, koşullu ifadeler veya döngüler içinde çağrılmamalıdır.
• Özel hook'lar, durum mantığı veya yan etkiler gibi tekrar kullanılabilir kod parçalarını organize etmek için oldukça yararlıdır.

Özel hook'lar, kodunuzu daha temiz, anlaşılır ve yeniden kullanılabilir hale getirmenizi sağlar. Aynı zamanda, karmaşık bileşenler arasında durum mantığı ve yan etkileri paylaşmanıza olanak tanır.