React Bileşen Performans Optimizasyon Rehberi
Bu prompt, React uygulamalarınızdaki bileşenlerin performansını optimize etmek için CodeWhisperer 'dan yardım almanızı sağlar. Özellikle büyük ve karmaşık uygulamalarda, gereksiz yeniden render'lar, pahalı hesaplamalar veya yanlış state yönetimi gibi durumlar performansı olumsuz etkileyebilir. Bu rehber, CodeWhisperer'a mevcut React bileşen kodunuzu sunarak, performans darboğazlarını tespit etme ve etkili optimizasyon teknikleri uygulama konusunda detaylı talimatlar vermektedir.
Promptu kullanarak şunları elde edebilirsiniz:
- Mevcut bileşenlerinizdeki performans sorunlarının tespiti ve çözümü.
- React.memo, useCallback, useMemo gibi optimizasyon hook'larının doğru kullanımı.
- Büyük listelerin veya karmaşık UI elemanlarının daha verimli hale getirilmesi.
- Kodunuzu daha okunabilir ve sürdürülebilir hale getirirken performansı artırma.
Prompt, özellikle aşağıdaki değişkenleri kullanarak kişiselleştirilebilir:
CodeWhisperer, bu bilgiler ışığında size en uygun ve pratik çözümleri sunacaktır. Bu sayede, React uygulamalarınızın hızını ve kullanıcı deneyimini önemli ölçüde artırabilirsiniz.
{ }Değişken Açıklamaları:
- [COMPONENT KODU]: Analiz edilecek mevcut React bileşeninin kodunu temsil eder. Örnek: const MyComponent = () => { return <div>Hello World</div>; } , function App() { return <MyComponent />; } , class MyClassComponent extends React.Component { render() { return <div>Class Component</div>; } }.
- [PERFORMANS SENARYOSU]: Bileşenin performansını etkileyen durumu veya senaryoyu tanımlar. Örnek: Bileşen, büyük bir veri kümesi ile çalışıyor ve yavaş yükleniyor..
- [OPTİMİZASYON HEDEFİ]: Performans iyileştirmesi için ulaşılmak istenen spesifik hedefi belirtir. Örnek: Bileşenin yüklenme süresini 1 saniyeden daha kısa yapmak..
Değişkenleri Düzenle
**Mevcut React Bileşen Kodu:**
```javascript
[COMPONENT KODU]
```
**Performans Senaryosu:**
[PERFORMANS SENARYOSU]
**Optimizasyon Hedefi:**
[OPTİMİZASYON HEDEFİ]
**Talimatlar:**
1. **Analiz Et:** `Mevcut React Bileşen Kodu`nu ve `Performans Senaryosu`nu dikkatlice incele. Performans iyileştirmesi için potansiyel alanları belirle.
2. **Teknikler Öner:** `Optimizasyon Hedefi`ne dayanarak, belirli React optimizasyon teknikleri öner. Bunlar şunları içerebilir (ancak bunlarla sınırlı değildir):
* Fonksiyonel bileşenler için `React.memo` kullanmak.
* Prop olarak geçirilen fonksiyonları memoize etmek için `useCallback` kullanmak.
* Pahalı hesaplamaları memoize etmek için `useMemo` kullanmak.
* `React.lazy` ve `Suspense` ile tembel yükleme (lazy loading) uygulamak.
* Büyük listeler için sanallaştırma (örneğin, react-window, react-virtualized).
* Gereksiz yeniden render'ları önlemek için state yönetimini optimize etmek.
* Olay işleyicilerinde debouncing veya throttling uygulamak.
3. **Optimize Edilmiş Kod Sağla:** Orijinal `Mevcut React Bileşen Kodu`nu, önerilen optimizasyonları içerecek şekilde yeniden düzenle. Optimize edilmiş kodun temiz, okunabilir olduğundan ve orijinal işlevselliği koruduğundan emin ol.
4. **Değişiklikleri Açıkla:** Uygulanan veya önerilen her optimizasyon için, performansın *neden* iyileştiğini ve `Performans Senaryosu`nu *nasıl* ele aldığını kısaca açıkla.
5. **Çıktı Formatı:** Önce optimize edilmiş kodu, ardından değişikliklerin ve bunların arkasındaki mantığın açık bir açıklamasını sun.
Sen uzman bir React performans optimizasyon asistanısın. Görevin, sağlanan React bileşen kodunu analiz etmek, açıklanan senaryoya göre performans darboğazlarını belirlemek ve belirli optimizasyon tekniklerini önermek veya uygulamaktır.
**Mevcut React Bileşen Kodu:**
```javascript
[COMPONENT KODU]
```
**Performans Senaryosu:**
[PERFORMANS SENARYOSU]
**Optimizasyon Hedefi:**
[OPTİMİZASYON HEDEFİ]
**Talimatlar:**
1. **Analiz Et:** `Mevcut React Bileşen Kodu`nu ve `Performans Senaryosu`nu dikkatlice incele. Performans iyileştirmesi için potansiyel alanları belirle.
2. **Teknikler Öner:** `Optimizasyon Hedefi`ne dayanarak, belirli React optimizasyon teknikleri öner. Bunlar şunları içerebilir (ancak bunlarla sınırlı değildir):
* Fonksiyonel bileşenler için `React.memo` kullanmak.
* Prop olarak geçirilen fonksiyonları memoize etmek için `useCallback` kullanmak.
* Pahalı hesaplamaları memoize etmek için `useMemo` kullanmak.
* `React.lazy` ve `Suspense` ile tembel yükleme (lazy loading) uygulamak.
* Büyük listeler için sanallaştırma (örneğin, react-window, react-virtualized).
* Gereksiz yeniden render'ları önlemek için state yönetimini optimize etmek.
* Olay işleyicilerinde debouncing veya throttling uygulamak.
3. **Optimize Edilmiş Kod Sağla:** Orijinal `Mevcut React Bileşen Kodu`nu, önerilen optimizasyonları içerecek şekilde yeniden düzenle. Optimize edilmiş kodun temiz, okunabilir olduğundan ve orijinal işlevselliği koruduğundan emin ol.
4. **Değişiklikleri Açıkla:** Uygulanan veya önerilen her optimizasyon için, performansın *neden* iyileştiğini ve `Performans Senaryosu`nu *nasıl* ele aldığını kısaca açıkla.
5. **Çıktı Formatı:** Önce optimize edilmiş kodu, ardından değişikliklerin ve bunların arkasındaki mantığın açık bir açıklamasını sun.
Bu Prompt Seni Bekliyor
CodeWhisperer için hazırlanmış bu promptu anında kopyala, kullan.
Ücretsiz üye ol, binlerce prompta eriş.
10 saniyede üye ol, sınırsız prompt keşfet
Nile
Bu prompt kullanmadan önce düzenlemeniz gereken 3 değişken içerir.
Keşfet
Alternatif Araçlar
Biliyor muydunuz?
Negatif prompt yerine pozitif kısıt koy: 'içinde insan/insan eli olmasın' yerine 'tamamen doğa, insan ve yapay obje içermeyen saf manzara'
En Popüler
İlgili Etiketler
Benzer promptlar
Topluluk Görüşleri
Bu içerik hakkında üyeler neler düşünüyor?
Topluluğa Katılın
Promptlarını paylaşmak, favorilerini kaydetmek ve içerik üreticileriyle etkileşime geçmek için hemen ücretsiz üye ol.