useEffect nedir?
- React kursu
- Başlangıç
- Ders 65/84
- 4 dk
useEffect ile bileşen çizildikten sonra yan etkiler yapmayı öğrenirsin.
useEffect nedir?
Bileşenler çizilirken yan etkiler (effect) yapmak için useEffect kullanılır: veri çekme, abonelik, zamanlayıcı, DOM değişikliği. Bunlar render sırasında yapılamaz.
Yazım: useEffect(() => { ... }). İçerideki fonksiyon render'dan sonra çalışır. İlk render dahil her çizimden sonra çağrılır.
İleride bağımlılık dizisi ile ne zaman çalışacağını kontrol edeceğiz; şimdilik temel kavramı öğreniyoruz.
Yan etkiler
Yan etki, render dışında kalan her şeydir: ağ isteği, zamanlayıcı, abonelik, DOM değişikliği. Bunları render içinde yaparsan React karışır.
useEffect bunları render'dan sonraya taşır. Böylece render saf kalır; aynı girdi hep aynı çıktıyı verir.
Bu ayrım, React'in öngörülebilir olmasını sağlar.
Uygulama Başlık effect'i
Aşağıdaki iskeleti tamamla. TitlePage bileşeni yaz; useEffect'i içe aktar. useEffect(() => { document.title = "Sayfa"; }); çağır. <h1>İçerik</h1> döndür. Dışa aktar.
Başlangıç kodu
import { useEffect } from "react";
// TitlePage bileşenini buraya tanımlaÖrnek çözüm
import { useEffect } from "react";
function TitlePage() {
useEffect(() => { document.title = "Sayfa"; });
return <h1>İçerik</h1>;
}
export default TitlePage;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useEffect ne zaman çalışır?
The render phase must stay pure.- Sadece unmount'ta
- Render sırasında
- Render'dan sonra Doğru cevap
- Asla
Açıklama: useEffect render'dan sonra çalışır.
2 useEffect nedir: eksik parçayı tamamla
useEffect(() => { ____ })useEffect(() => { document.title = "Merhaba" })Açıklama: Effect içinde başlığı güncelledin.
3 useEffect nedir: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
useEffect |
Yan etki hook'u |
fetch |
Veri çekme |
setTimeout |
Zamanlayıcı |
document.title |
DOM değişikliği |