Varsayılan değer ve hata

Provider dışında kullanımı hata fırlatan bir hook yazmayı öğrenirsin.

Varsayılan değer ve hata

Context'e null varsayılan değer verip sonra kontrol etmeden kullanmak yaygın bir hatadır. const user = useContext(UserContext); user.name satırı, Provider yoksa patlar.

Çözüm: varsayılan değer olarak bir hata fırlatan bir nesne ver. createContext({ '{ getName: () => { throw new Error("UserContext Provider yok"); } }' }). Böylece Provider yoksa anlamlı bir hata alınır.

Daha temiz yöntem: özel bir useUserContext hook'u yaz. İçinde useContext(UserContext) çağır; null ise throw yap. Bu, tüketen bileşenlerin her seferinde kontrol yapmasını önler.

Özel useXContext hook'u

Her context için bir useXContext hook'u yazmak iyi bir alışkanlıktır. Hook içinde const ctx = useContext(XContext); if (ctx === null) throw new Error("XContext Provider içinde kullanın"); return ctx;.

Bu desen üç şey kazanır: tip güvenliği (TypeScript'te daha da güçlenir), tutarlı hata mesajı ve merkezi doğrulama. Tüketen bileşenler useUserContext() çağırır, null kontrolü yapmaz.

Eğer daha sonra context'e debug log eklemek istersen, yalnızca bu hook'u güncellersin. Tüm tüketenler otomatik olarak faydalanır. Bu yaklaşım büyük projelerde hayat kurtarır.

Uygulama useUserContext guard

Aşağıdaki iskeleti tamamla. useUserContext hook'u yaz. const ctx = useContext(UserContext); çağır. Eğer ctx === null ise throw new Error("UserContext Provider içinde kullanın");. ctx'i döndür. Hook'u dışa aktar.

Örnek çözümü göster

import { useContext } from "react";

function useUserContext() {
  const ctx = useContext(UserContext);
  if (ctx === null) throw new Error("UserContext Provider içinde kullanın");
  return ctx;
}

export default useUserContext;

Kendini test et

null varsayılan context neye yol açar?
- Daha az kod
- Daha hızlı çalışır
- useEffect atlanır
- Provider yoksa patlar
Cevabı göster

Provider yoksa patlar — null varsayılan, Provider yoksa patlar.

Guard hook

Guard hook, ____ değerini görünce hata fırlatır.

Cevabı göster

Guard hook, null değerini görünce hata fırlatır.

Guard desenini eşleştir

useContext

Okuma
null

Hata koşulu
throw

Hata fırlatma
useXContext

Hook

Sıradaki ders: Özet - Context derin

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler