1- Inspect Performance with Dev Tools

1. Production Modu: Uygulamanın production modunda çalışıp çalışmadığını kontrol etmenin önemi vurgulanıyor. Development modunda uygulama daha yavaş çalışır çünkü ekstra işlemler yapılır, örneğin hata mesajları ve ek loglar eklenir. Production moduna geçildiğinde bu ek işlemler ortadan kalkar ve performans artar.
2. React Developer Tools: React geliştirici araçlarının, özellikle profiler aracının kullanımı üzerinde duruluyor. Bu araç, uygulamada hangi bileşenlerin yeniden render edildiğini ve neden render edildiğini görmeyi sağlar. Özellikle, uygulama performansını optimize etmek için sorunlu alanları tespit etmekte çok faydalıdır.
3. Key Kullanımı: Liste elemanları üzerinde döngü yaparken key prop'larının doğru kullanılması gerektiği belirtiliyor. key prop'larının yanlış kullanımı, örneğin dizin kullanarak, performans sorunlarına yol açabilir.
4. Performans Sorunlarının Tespiti: Performans sorunlarını tespit etmek için genellikle uygulamada belirli işlemler yapılırken (örneğin, bir öğeyi silmek) profiler aracıyla kaydedip, nelerin yeniden render edildiğini incelemek önemlidir.
5. Ölçüm ve Optimizasyon: Performans optimizasyonuna başlamadan önce bir sorunun varlığını tespit etmek gerektiği, rastgele optimizasyonların zaman kaybı ve potansiyel olarak yeni sorunlar yaratabileceği vurgulanıyor. Performans sorunlarını ölçmek ve optimize ettikten sonra tekrar ölçmek önemlidir.
6. Geliştirici Araçlarıyla Performans İzleme: Geliştirici araçlarıyla uygulamanın performansını izlerken, işlemciyi ve ağı yavaşlatarak ortalama bir kullanıcının deneyimini simüle etmek tavsiye ediliyor.

Bu temel noktalar, React uygulamalarının performansını izleme ve optimize etme sürecinde dikkat edilmesi gereken kritik hususlardır.

2- Dev Tools Q&A

1. React Profiler ve Chrome DevTools Kullanımı: React Profiler, uygulamanızın hangi bileşenlerinin yeniden render edildiğini görmek için kullanılır, ancak bazen sadece bu araç yeterli olmaz. Daha derinlemesine analizler için Chrome DevTools gibi diğer araçlara başvurulabilir. Özellikle JavaScript hatalarını ayıklamak, breakpoint eklemek veya konsol loglarını incelemek için Chrome DevTools kullanılır.
2. Performans Analizindeki Ağırlık: Profiler gibi araçlar kullanıldığında, uygulama normalden daha yavaş çalışır. Bu nedenle, elde edilen sürelerin tam olarak doğru olmayabileceğini unutmamak gerekir. Ancak, farklı geliştirme aşamalarında performanstaki görece iyileşmeler hala anlamlıdır.
3. Performansın Altın Kuralı: "Yapılmayan işlem, yapılan işlemden daha hızlıdır." Bu kural, gereksiz render işlemlerini önlemek, memoization yapmadan önce maliyetini değerlendirmek ve işlemleri gerektiği zaman yapmak gibi temel performans optimizasyonları için geçerlidir.
4. React 18 ile Gelen Yenilikler: React 18 ile birlikte bazı işlemler önceliklendirilebilir. Örneğin, kullanıcının klavye veya fare etkileşimlerine daha hızlı yanıt verilmesi sağlanabilirken, daha pahalı işlemler ertelenebilir. Bu, uygulamanın yanıt süresini iyileştirmeye yardımcı olur.

Bu temel prensipler, React uygulamaları geliştirirken performansın optimize edilmesine yardımcı olacak stratejiler sunar.

3- React Rendering Cycle