React Temizliği
Daha iyi ve daha temiz React kodu yazmanın basit yolları
Temiz kod, çalışan koddan daha fazlasıdır. Temiz kod okunması kolay, anlaşılması basit ve özenle organize edilmiştir. Bu makalede, daha temiz React kodu yazmanın 8 yolunu inceleyeceğiz.
Bu önerileri incelerken, bunların tam olarak ne olduklarını hatırlatmak önemli diye düşünüyorum: öneri. Bunlardan herhangi birine katılmıyorsanız, bu sorun değil. Ancak bunlar, kendi React kodumu yazarken faydalı bulduğum uygulamalardır.
Başlayalım!
1. Yalnızca Bir Koşul İçin Rendering
Bir şeyi render etmek istiyorsunuz ve bunu koşula bağlı yapacaksınız diyelim. Koşul doğru olduğunda onu render etmek, yanlış olduğunda ise render etmek istemiyorsunuz. Böyle bir şeye ihtiyacınız olduğunda ternary operator kullanmayın. Yerine && operatörünü kullanmak daha akıllıca olacaktır.
Kötü örnek:
İyi örnek:
2. Her İki Koşul İçin Rendering
Bu seferki senaryomuz farklı. Koşul doğru olduğunda bir şeyi render etmek, yanlış olduğunda ise başka bir şeyi render etmek istiyorsunuz diyelim. İşte bu tür bir durumda ternary operator kullanmamız daha sağlıklı olacaktır.
Kötü örnek:
İyi örnek:
3. Boolean Proplar
Elimizde ismi acMisin olan bir prop var. Bunu bir componente true olarak göndermek istiyoruz. Yapmamız gereken şey çok basit; sadece propu ismiyle çağırmamız gerekiyor, ona acMisin={true} şeklinde bir değer atayıp çağırmak biraz gereksiz olabilir.
Kötü örnek:
İyi örnek:
4. String Proplar
String bir prop değerini curly braces veya backticks kullanmadan sadece çift tırnak işaratleri içerisinde gönderebileceğimizi biliyor muydun?
Kötü örnek:
İyi örnek:
5. Event Handler Fonksiyonları
Eğer elinizde, içinde sadece Event objesini kullanmak istediğiniz bir event handler varsa ona fonksiyonunuzu onChange={handleChange} şeklinde gönderebilirsiniz. Bu fonksiyonu onChange={e => handleChange(e)} şeklinde köşeli parantezler içine alıp anonymous fonksiyon olarak göndermek ise temiz kodun en sevmediği yöntemlerden biridir.
Kötü örnek:
İyi örnek:
6. Componentleri Prop Olarak Göndermek
Bu senaryo bir componenti prop olarak başka bir componente göndermek isteyen kişiler için geçerli. Bu gibi durumlarda eğer prop olarak gönderdiğiniz componentin herhangi bir propa ihtiyacı yoksa onu parantezler ile sarıp göndermenize gerek yoktur, ismini yazmanız yeterli olacaktır.
Kötü örnek:
İyi örnek:
7. Tanımsız Proplar
Tanımlanmamış proplar devre dışı bırakılır, bu yüzden eğer bir componente ihtiyacı olan propu göndermeseniz bile component kendi içinde o propu undefined olarak tanıyacak ve herşey yolundaymış gibi devam edecektir. (Tabii o propun tanımsız olması algoritmik olarak herhangi bir sorun çıkarmayacak olması gerekiyor.) İçerde tekrar “tanımsız mı?” kontrolüne ihtiyacınız yoktur.
Kötü örnek:
İyi örnek:
8. Güncel State’i Önceki State’e Göre Ayarlamak
React State güncellemeleri asenkron olarak toplu şekilde yapılır, doğal olarak DOM’daki güncellemeler hemen uygulanmaz. Eğer yeni State’inizi önceki State’e göre ayarlamanız gerekiyorsa, mutlaka önceki State’inizi bir fonksiyon haline getirin ve yeni State’inizi bu fonksiyon ile setleyin. Güncellemelerinizin bu şekilde yazılmaması beklenmeyen sonuçlara yol açabilir.
Kötü örnek:
İyi örnek:
Çorbada Tuzu Bulunanlar
Aşağıdaki uygulamalar React özelinde değildir ama JavaScript (ya da herhangi bir programlama dili) için temiz kod yazmanızı sağlayacak, herkesin işine yaracağını düşündüğüm uygulamalardır.
- Karmaşık mantıkları düzgünce adlandırılmış fonksiyonlara bölün.
- Özel ve kalıcı değişkenlerinizi constant olarak tanımlayın.
- Anlaşılır biçimde adlandırılmış değişkenler kullanın.
İyi kodlamalar!
