Özet - Performans
- React Native kursu
- Orta seviye
- Ders 93/116
- 5 dk
React.memo, useCallback ve useMemo'yu birleştirerek optimize bir liste yazarsın.
Özet - Performans
Bu grupta performans için beş aracı öğrendin. React.memo bileşeni props değişmedikçe atlatır. useCallback fonksiyon referansını sabit tutar. useMemo pahalı hesabın sonucunu önbelleğe alır. FlatList optimizasyonu getItemLayout ve keyExtractor ile kaydırmayı hızlandırır.
InteractionManager ağır işi etkileşimden sonraya erteler. Bu beşi birlikte kullanmak, gerçek bir uygulamanın akıcı kalmasına yardımcı olur. Hepsini her yere koymak doğru değil; ölçerek, ihtiyaca göre ekle. Profiler ile nerede darboğaz olduğunu gör, sonra ilgili aracı seç.
Uygulama Memo'lu kart ve useCallback
Bir Card bileşeni zaten tanımlı; title prop'u alır. React.memo ile MemoCard oluştur. App bileşeni içinde count state'i tut; handlePress'i useCallback ile tanımla (deps []). MemoCard'a title={count.toString()} ver.
Başlangıç kodu
import React, { useState, useCallback } from 'react';
import { Text, View } from 'react-native';
function Card({ title }) {
return <Text>{title}</Text>;
}
// MemoCard'ı React.memo ile oluştur
export default function App() {
const [count, setCount] = useState(0);
// handlePress'i useCallback ile tanımla; bağımlılık boş dizi
// MemoCard'a title={count.toString()} ver
return null;
}Örnek çözüm
import React, { useState, useCallback } from "react";
import { Text, View } from "react-native";
function Card({ title }) {
return <Text>{title}</Text>;
}
const MemoCard = React.memo(Card);
export default function App() {
const [count, setCount] = useState(0);
const handlePress = useCallback(() => {
setCount((c) => c + 1);
}, []);
return <MemoCard title={count.toString()} />;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir fonksiyonun referansını sabit tutmak için?
const fn = ???(() => {}, []);- useCallback Doğru cevap
- React.memo
- useMemo
- InteractionManager
Açıklama: useCallback fonksiyon referansını sabit tutar.
2 Aracı amacına eşle
| Kavram | Anlamı |
|---|---|
React.memo |
Bileşeni sarmalar |
useCallback |
Fonksiyon saklar |
useMemo |
Değer önbelleğe alır |
InteractionManager |
İşi erteler |
3 useCallback import
import { ____, useState } from 'react';import { useCallback, useState } from 'react';Açıklama: useCallback React'ten içe aktarılır.