Özet - Performans

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.

Örnek çözümü göster

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()} />;
}

Kendini test et

Bir fonksiyonun referansını sabit tutmak için?
```
const fn = ???(() => {}, []);
```
- useCallback
- React.memo
- useMemo
- InteractionManager
Cevabı göster

useCallback — useCallback fonksiyon referansını sabit tutar.
Aracı amacına eşle

React.memo

Bileşeni sarmalar
useCallback

Fonksiyon saklar
useMemo

Değer önbelleğe alır
InteractionManager

İşi erteler

useCallback import

import { ____, useState } from 'react';

Cevabı göster

import { useCallback, useState } from 'react';

Sıradaki ders: Jest

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler