Uyumluluk kuralları

Compiler ile uyumlu kod yazmanın kurallarını öğrenirsin.

Uyumluluk: saf render

React Compiler, bileşenlerin saf (pure) olmasını bekler. Çizim sırasında yan etki yapılmamalıdır: Math.random() çağırmak, global değişken değiştirmek veya doğrudan DOM'a yazmak derleyiciyi bozar.

Yan etkiler useEffect içine konur. State güncelleme setState ile, okuma ise çizim sırasında yapılır.

Hook'lar her zaman aynı sırada çağrılmalı; koşul içinde hook çağrılmaz.

Hook sırası

React, hook'ları çağrılma sırasına göre izler. Bir if içinde useState çağırırsan sıra bozulur ve çalışma anı hatası alırsın.

Doğru yöntem: hook'u en üstte çağır, sonra if ile koşullu davranışı uygula. useEffect bağımlılık dizisi de aynı sırayla değerlendirilir.

Derleyici bu deseni otomatik denetler; ihlal varsa uyarı verir.

Uygulama Counter bileşenini yaz

Counter yaz. useState(0) ile count tut. useEffect içinde document.title = count yap, bağımlılık [count]. <button onClick={() => setCount(count + 1)}>{count}</button> döndür. Dışa aktar.

Örnek çözümü göster

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = count;
  }, [count]);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
export default Counter;

Kendini test et

Saf render davranışlarını eşleştir

Math.random

Yan etki, çağrılmaz
useEffect

Yan etki burada
setState

State günceller
koşul

İçinde hook çağrılmaz
Aşağıdakilerden hangisi çizim sırasında güvenlidir?
- document.title atamak
- Math.random() çağırmak
- global değişken değiştirmek
- setState ile güncellemek
Cevabı göster

setState ile güncellemek — setState çizimde çağrılabilir, yan etki değildir.

Boşluğu doldur: useEffect bağımlılığı

useEffect(() => {
  document.title = count;
}, ____);

Cevabı göster

useEffect(() => {
  document.title = count;
}, [count]);

Sıradaki ders: Özet - React Compiler

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler