𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸 𝗣𝗿𝗶𝗻𝗰𝗶𝗽𝗹𝗲𝗿𝗶
Her şey için useEffect kullanmayı bırakın. Birçok geliştirici bu hook'u yanlış kullanıyor. Bu durum hatalara yol açar ve kodun okunmasını zorlaştırır.
useEffect kullanımını sınırlayın.
Sayfa başına bir tane useEffect kullanmaya çalışın. Aynı state için birçok hook kullanmak kafa karışıklığına neden olur. Hangi hook'un hangi state'i güncellediğinin takibini kaybedersiniz.
Kullanıcı olayları (user events) için useEffect kullanmayı bırakın.
Tıklamalar veya dokunuşlar için useEffect kullanmayın. Bunun yerine event handler'ları kullanın.
- Kötü: Bir tıklamadan sonra state'i güncellemek için useEffect kullanmak.
- İyi: State'i güncellemek için onClickBar gibi bir fonksiyon kullanmak.
Bilmeniz gereken olay türleri:
- Sayfa navigasyonu ve ilk render işlemleri.
- Ağ bağlantısı değişiklikleri.
- WebSocket veya gerçek zamanlı sunucu güncellemeleri.
Tıklama gibi kullanıcı eylemleri useEffect'e ait değildir. Bu eylemler için doğrudan event handler'ları kullanın.
Bileşenleri (components) prop'lara göre ayırın.
Mantığı değiştirmek için bir boolean prop kullanıyorsanız, bileşeninizi bölün. Hem veri oluşturmayı hem de veriyi güncellemeyi yöneten tek bir bileşen oluşturmayın.
Çok sayıda "if" ifadesi içeren tek bir bileşen çok büyür. Bu da uygulamanın bakımını zorlaştırır.
- Kötü: Form alanlarını değiştiren bir "isAdd" prop'una sahip tek bir bileşen.
- İyi: Bir "RegisterComponent" ve bir "UpdateComponent" oluşturun.
Küçük bileşenleri test etmek daha kolaydır. Daha hızlı çalışırlar. Temiz kalırlar.
Kaynak: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31