Custom hook nedir?

use ile başlayan fonksiyonların tekrar kullanılabilir mantık parçası olduğunu öğrenirsin.

Custom hook nedir?

Bir custom hook, kendi yazdığın ve adı use ile başlayan bir JavaScript fonksiyonudur. İçinde diğer hook'ları (useState, useEffect vb.) çağırabilir ve bileşenler arasında mantık paylaşımı yapabilirsin.

Örneğin birkaç bileşende aynı sayaç mantığını kullanıyorsan, bunu useCounter adında bir hook'a taşıyıp her bileşende çağırırsın. Bu, kopya kodu önler ve bakımı kolaylaştırır.

İlkesi vardır: adı use ile başlamalı ve yalnızca en üst seviyede (döngü, koşul ya da iç içe fonksiyon içinde değil) çağrılmalıdır. Bu ilkeler React'in hook sırasını takip edebilmesi için şarttır.

İki ilke

Custom hook'lar iki katı ilkeye uyar. Birincisi adlandırma: use öneki zorunludur; bu sayede React bunun bir hook olduğunu bilir ve linter'lar da tanır.

İkincisi çağrı yeri: hook'lar yalnızca bileşenin en üst seviyesinde çağrılır. Döngü içinde, if bloğunda ya da iç içe fonksiyonda çağrılmaz. Bu, React'in her render'da aynı sırada hook'ları çağırmasını sağlar.

Bu iki ilkeye uyduğunda, hook'ları güvenle bileşenler arasında paylaşabilirsin. Aksi halde React hook sırasını şaşırır ve hata fırlatır.

Uygulama useCounter iskeleti

Aşağıdaki iskeleti tamamla. useCounter adında bir custom hook yaz. useState(0) ile count ve setCount tanımla. increment adında bir fonksiyon döndür: () => setCount(c => c + 1). Hook'u dışa aktar.

Örnek çözümü göster

import { useState } from "react";

function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount((c) => c + 1);
  return increment;
}

export default useCounter;

Kendini test et

Custom hook adı ne ile başlar?
- hook
- use
- custom
- get
Cevabı göster

use — Custom hook adları use ile başlar.

Mantık paylaşımı

Aynı mantığı birden çok bileşende kullanmak için ____ yazılır.

Cevabı göster

Aynı mantığı birden çok bileşende kullanmak için custom hook yazılır.

Custom hook kavramlarını eşleştir

use öneki

Adlandırma
en üst seviye

Çağrı yeri
useState

İçeride çağrılır
paylaşım

Amaç

Sıradaki ders: useToggle

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler