Uyumluluk kuralları
- React kursu
- Uzman seviye
- Ders 3/32
- 4 dk
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.
Başlangıç kodu
import { useState, useEffect } from 'react';
// Counter bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Saf render davranışlarını eşleştir
| Kavram | Anlamı |
|---|---|
Math.random |
Yan etki, çağrılmaz |
useEffect |
Yan etki burada |
setState |
State günceller |
koşul |
İçinde hook çağrılmaz |
2 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 Doğru cevap
Açıklama: setState çizimde çağrılabilir, yan etki değildir.
3 Boşluğu doldur: useEffect bağımlılığı
useEffect(() => {
document.title = count;
}, ____);useEffect(() => {
document.title = count;
}, [count]);Açıklama: Bağımlılık dizisi köşeli parantez içinde yazılır.