Update

Bileşen update olayını öğrenirsin.

Update

Bir bileşen mount olduktan sonra state ya da prop değişirse update aşamasına geçer. React, bileşeni yeniden çağırır, yeni JSX'i hesaplar ve değişen kısımları ekrana uygular. Bu yeniden çizime re-render denir.

Update sırasında useEffect'in bağımlılık dizisindeki değerlerden biri değiştiyse efekt tekrar çalışır. Boş dizi yalnızca mount'ta; dolu dizi her ilgili değişimde çalışır.

Re-render tetikleyicileri

Re-render üç durumda tetiklenir: setState çağrısı, ebeveynin yeniden çizmesi ya da Context değerinin değişmesi. Bir bileşen kendi state'ini değiştirirse kendisi de çocukları da yeniden çizilir.

Her çizim yeni bir JSX döndürür; React eskiyle karşılaştırıp yalnızca farkı uygular. Bu yüzden re-render ucuzdur; asıl maliyet yan etkilerde ve ağır hesaplarda olur.

Uygulama count değişimini izle

count her değiştiğinde console.log('count: ' + count) yaz. useEffect kullan ve bağımlılık dizisine count ekle.

Örnek çözümü göster

import React, { useState, useEffect } from 'react';
import { Button, Text, View } from 'react-native';

export default function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('count: ' + count);
  }, [count]);
  return (
    <View>
      <Text>{count}</Text>
      <Button title="Artır" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Kendini test et

Dolu bağımlılık dizisi

useEffect(() => { save(count); }, ____);

Cevabı göster

useEffect(() => { save(count); }, [count]);

Aşağıdakilerden hangisi re-render tetiklemez?
- setState çağrısı
- Ebeveynin çizimi
- Context değerinin değişimi
- Bir kardeş bileşenin çizimi
Cevabı göster

Bir kardeş bileşenin çizimi — Kardeş bileşenlerin çizimi birbirini etkilemez.
Re-render nedenleri

setState

State değişimi
prop

Ebeveyn verisi
Context

Global değer
mount

İlk çizim

Sıradaki ders: Unmount

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler