React Context Nasıl Kurulur

Prop drilling kodunuzu mahveder. Veriyi, ona ihtiyacı olmayan beş farklı bileşen katmanı üzerinden geçirirsiniz. React Context bunu çözer. Ancak, çoğu kurulum yeni bir sorun yaratır.

Bir context hook'unda "Go to Definition" özelliğini kullandığınızda, genellikle karşınıza sadece küçük bir useContext çağrısından ibaret bir dosya çıkar. Asıl mantık farklı bir dosyada yaşar. Gününüzü state mantığını arayarak geçirirsiniz.

Bunu daha iyi bir yapıyla düzeltebilirsiniz.

Şu deseni takip edin:

  • Context'i, public hook'u ve state mantığını tek bir dosyaya koyun.
  • Provider'ı ince bir kabuk (thin shell) olarak tutun.
  • Private mantığınızı korumak için bir lint kuralı kullanın.

Dosyalarınızı şu şekilde yapılandırın:

src/context/ • GameContext.ts (Context, public hook ve state mantığı) • GameProvider.tsx (İnce bir kabuk)

GameContext.ts içinde üç bölüm oluşturun:

  1. Context nesnesi.
  2. Bileşenlerin kullanması için bir public hook. Bu hook, context null ise bir hata fırlatmalıdır. Bu, bileşenleriniz provider dışında kaldığında hızlıca hata almalarını (fail fast) sağlar.
  3. State yönetimi için bir private hook. Bu hook, useState veya useReducer çağrılarınızı içerir.

Public hook'u ve private mantığı aynı dosyaya koyarak "Go to Definition" özelliğinin mükemmel çalışmasını sağlarsınız. Bileşenden doğrudan mantığa atlayabilirsiniz.

Bir risk mevcut. Private hook, Provider tarafından kullanılabilmesi için dışa aktarıldığından (export), bir ekip arkadaşınız onu yanlış yerde çağırabilir. Eğer çağırırlarsa, paylaşılan context'i kullanmak yerine yeni ve izole bir state oluştururlar.

Bunu önlemek için yorum satırları kullanmayı bırakın. Bunun yerine bir ESLint kuralı kullanın.

Bunu çözmek için eslint-plugin-restrict-callers eklentisini oluşturdum. Hangi fonksiyonların belirli hook'ları çağırmasına izin verildiğini tanımlayabilirsiniz.

Örneğin, ESLint'e yalnızca GameProvider'ın useGameStateManagement fonksiyonunu çağırabileceğini söyleyebilirsiniz. Başka biri denemeye çalışırsa, build işlemi net bir hata mesajıyla başarısız olur.

İş akışının özeti:

  • Context, public hook'lar ve private mantığı tek bir dosyada gruplayın.
  • Provider'ı yalnızca hook sonucunu provider değerine (value) aktarmak için kullanın.
  • Context eksikse public hook içinde hata fırlatın.
  • Public ve private hook'lar arasındaki sınırları zorunlu kılmak için ESLint kullanın.

Source: https://dev.to/jareddlewis/how-to-set-up-react-context-2c9h