Bu yazıda uzunca süredir beklenen yeni React 16 (Kod Adı “Fiber”) versiyonunun öne çıkan özelliklerinden kısaca bahsedeceğim. Listelemek gerekirse;

• Baştan yazılan yeni bir çekirdek mimari
• Daha performanslı SSR (Server-side rendering)
• Custom DOM attribute desteği (Artık data-foo="42" gibi attributeleri hata almadan yazabileceğiz)
• render methodunda Array ve String döndürme desteği
• Hata yakalama
• Portallar

Benim örnek vermek istediğim son 3 madde olacak. Çünkü bu 3 madde gerçekten de hayat kurtaracak derece önemli. Hemen örneklere geçiyorum.

render methodunda Array ve String döndürme

Çoğumuzun başına gelmiştir. Bir component’te birden fazla element döndürmeye kalkarız ve React bize bir hata mesajı verir. Biz de o elementleri bir div içerisine alır devam ederiz. Artık bunu yapmamıza gerek kalmayacak. Benim en çok hoşuma giden özellik bu oldu. Artık daha sade bir DOM yapısı oluşturabileceğiz.

Burada dikkat etmemiz gereken tek şey her bir array elemanına key değeri vermemiz olacak.

Diğer bir güzel özellik ise artık render methodunda stringleri span içerisine almadan direk olarak döndürebileceğiz.

Hata yakalama

Artık React componentlerimizde herhangi bir nedenle hata aldığımızda componentDidCatch methodu ile bu hatayı yakalayıp önlemler alabileceğiz.

Burada basit bir sayaç örneğimiz var. 5’e kadar sayıldığında bir hata fırlatıyor. Bu hatayı parent component’te yakalayıp, ona göre bir mesaj gösteriyoruz. Gerçek hayata dair örnek vermek gerekirse, başarısızlıkla sonuçlanan ve hata fırlatın bir GET request’i sonrası kullanıcılara hata mesajını güzel bir şekilde gösteren bir component sunabiliriz.

Portallar

Portal ana React component’imizi mount ettiğimiz DOM elementinin dışında herhangi bir DOM elementinde render işlemi yapabilmemizi sağlayan güzel bir özellik.

Burada listeleme yapan ana componentimiz ilk 3 elemanı root id’li div‘e mount olmuşken geri kalanları root2 id’li div‘e mount oldu. Bu gerçek hayatta nerede işimize yarar derseniz; overlay ya da modal kullanmamız gereken yerlerde bize büyük kolaylık sağlayabilir. Böylece mount olunan DOM elementi dışında modal veya overlay elementlerini createPortal ile tanımlayabiliriz.

Bu yazının olabildiğince kısa ve öz olmasını istedim. Umarım React 16’nın bu önemli özellikleri hakkında az çok bilgi verebilmişimdir. Herkese iyi geliştirmeler..