Bottleneck
- React Native kursu
- Uzman
- Ders 9/47
- 5 dk
Performans bottleneck tespitini öğrenirsin.
Darboğaz (bottleneck)
Darboğaz, uygulamanın yavaşlamasına neden olan tek noktadır. React Native'de yaygın nedenler: ağır FlatList, gereksiz re-render, senkron native çağrı ve büyük resimlerin decode edilmesidir.
Profil çıktısına bakıp en çok zaman harcanan yeri bulursun. Tüm optimizasyonlar tek yerde toplanmaz; en büyük darboğazı çöz, tekrar ölç, bir sonrakine geç.
Re-render'ı azaltma
React, state ya da props değiştiğinde bileşeni yeniden çizer. Gereksiz re-render'ı azaltmak için React.memo, useMemo ve useCallback kullanılır. Stabil referanslar props karşılaştırmasını hızlandırır.
Liste içinde her öğe memo ile sarılıysa yalnızca değişen öğe yeniden çizilir. keyExtractor da doğru kurulmalı; yoksa tüm liste yeniden çizilir.
Uygulama useCallback ile stabil fonksiyon
Bir handlePress fonksiyonunu useCallback ile sar. Bağımlılık dizisi boş olsun. Fonksiyon () => console.log('tıklandı') olsun.
Başlangıç kodu
import React, { useCallback } from 'react';
// handlePress'i useCallback ile tanımla
export default function App() {
return null;
}Örnek çözüm
import React, { useCallback } from 'react';
const handlePress = useCallback(() => console.log('tıklandı'), []);
export default function App() {
return null;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Darboğaz nedenlerini eşleştir
| Kavram | Anlamı |
|---|---|
FlatList |
Ağır liste |
Re-render |
Gereksiz çizim |
Büyük resim |
Decode maliyeti |
Native çağrı |
Senkron blok |
2 Gereksiz re-render'ı azaltmak için hangisi kullanılır?
- Platform.OS Doğru cevap
- AsyncStorage
- FlatList
- React.memo
Açıklama: React.memo props değişmediyse yeniden çizimi atlar.
3 useCallback importunu yaz
import { useState, ____ } from 'react';import { useState, useCallback } from 'react';Açıklama: useCallback fonksiyon referansını stabilize eder.