React Bileşen Yaşam Döngüsü: Mount, Update, Unmount

React bileşen yaşam döngüsünün üç aşaması vardır: mount (bileşen ekranda ilk kez görünür), update (state'i, props'u ya da context'i değiştiği için yeniden render olur) ve unmount (kaldırılır). Fonksiyon bileşenlerinde bu aşamalara useEffect ile tepki verirsin: [] ile bir efekt mount'tan sonra çalışır, bağımlılıkları olan bir efekt onların değiştiği güncellemelerden sonra çalışır ve bir efektin döndürdüğü fonksiyon unmount'ta çalışır.

Önizlemenin altındaki konsol her aşamayı gerçekleştiği anda gösterir.

import { useEffect, useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    console.log('render, count =', count);

    useEffect(() => {
        console.log('mounted');
        return () => console.log('unmounted');
    }, []);

    useEffect(() => {
        if (count > 0) console.log('updated, count =', count);
    }, [count]);

    return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

export default function App() {
    const [show, setShow] = useState(true);

    return (
        <div>
            {show && <Counter />}
            <button onClick={() => setShow(!show)} style={{ marginInlineStart: 8 }}>
                {show ? 'Unmount' : 'Mount'} the counter
            </button>
        </div>
    );
}

Konsol render, count = 0 ve mounted ile başlar. Count'a her tıklama bir render ve bir update kaydeder. Unmount unmounted kaydeder; Mount again count = 0'dan baştan başlar, çünkü state bileşenle birlikte atıldı.

Mount

Bir bileşen, React onu ağaçtaki belirli bir yerde ilk kez render ettiğinde mount olur. React fonksiyonu çağırır, döndürdüğü JSX'ten DOM düğümlerini oluşturur, ekler, tarayıcının boyamasına izin verir ve sonra bileşenin efektlerini çalıştırır.

useEffect(fn, []), bileşen ekranda olduğu sürece var olması gereken şeyleri başlattığın yerdir: bir abonelik, bir zamanlayıcı, bir bağlantı, ilk bir veri isteği. Boyamadan sonra çalışır, bu yüzden ilk kareyi asla geciktirmez.

Update

Bir bileşen şu durumlarda güncellenir (yeniden render olur):

• kendi state'i değiştiğinde,
• ebeveyni yeniden render olduğunda (varsayılan olarak her çocuk, props'u değişsin ya da değişmesin, render olur),
• okuduğu bir context değiştiğinde.

Her güncellemeden sonra React bağımlılıkları değişen efektleri çalıştırır. Bir efekti yeniden çalıştırmadan önce o efektin önceki temizlemesini çalıştırır, böylece eski abonelik yenisi açılmadan kapanır. Render sayfası bir render'ı neyin tetiklediğini daha ayrıntılı anlatıyor.

Unmount

Bir bileşen, ebeveyni onu render etmeyi bıraktığında (yukarıdaki {show && <Counter />} gibi), key'i değiştiğinde ya da kökün kendisi unmount edildiğinde unmount olur. React DOM düğümlerini kaldırır, her efektin temizlemesini çalıştırır ve state'ini atar. Bileşen sonra yeniden görünürse yepyeni bir örnektir.

Ebeveynler ve çocuklar

React yukarıdan aşağı render eder ama efektleri aşağıdan yukarı çalıştırır. Bir ebeveyn ve çocuk birlikte mount olduğunda önce çocuğun efektleri çalışır, böylece bir ebeveynin efekti çocuklarının tamamen kurulmuş olmasına güvenebilir.

import { useEffect, useState } from 'react';

function Child() {
    console.log('render Child');
    useEffect(() => {
        console.log('Child effect');
        return () => console.log('Child cleanup');
    }, []);
    return <p>I am the child.</p>;
}

function Parent() {
    console.log('render Parent');
    useEffect(() => {
        console.log('Parent effect');
        return () => console.log('Parent cleanup');
    }, []);
    return <Child />;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Remove' : 'Add'} both</button>
            {show && <Parent />}
        </div>
    );
}

Mount render Parent, render Child, Child effect, Parent effect kaydeder. Remove'a bas; temizlemeler ters yönde çalışır: önce Parent cleanup, sonra Child cleanup.

Render ve commit aşamaları

Her güncelleme iki aşamadan geçer:

1. Render aşaması. React yeni JSX'i hesaplamak için bileşenlerini çağırır ve onu önceki sonuçla karşılaştırır. Ekranda henüz hiçbir şey değişmez. React bu işi duraklatabilir, StrictMode'da iki kez çalıştırabilir ya da atabilir; render'ın saf olması gerekmesinin nedeni budur: istek yok, abonelik yok, dış değişkenlerde değişiklik yok.
2. Commit aşaması. React farkları DOM'a uygular, ref'leri bağlar ve useLayoutEffect callback'lerini çalıştırır; hepsi tarayıcı boyamadan önce. useEffect callback'leri bundan sonra, genellikle tarayıcı boyadıktan sonra çalışır. Güncellemeye bir tıklama ya da başka bir ayrık girdi yol açtığında React onları bunun yerine layout efektlerinin hemen ardından çalıştırır, böylece sonuç bir sonraki olaydan önce hazır olur.

import { useEffect, useLayoutEffect, useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    console.log('1. render phase: computing JSX for', count);

    useLayoutEffect(() => {
        console.log('2. commit phase: layout effect, DOM updated, not painted yet');
    });

    useEffect(() => {
        console.log('3. effect: after the commit');
    });

    return <button onClick={() => setCount(count + 1)}>Render again ({count})</button>;
}

Her tıklama üç satırı aynı sırayla kaydeder. Bu efektlerin bağımlılık dizisi yoktur, bu yüzden her render'dan sonra çalışırlar. İkisine de ikinci argüman olarak [] ekle; yalnızca ilkinden sonra çalışırlar.

Class yaşam döngüsü metotları ve hook karşılıkları

Class bileşenleri yaşam döngüsünü adlandırılmış metotlar olarak açıkça yazar. Onlarla eski kodda ve hâlâ class gerektiren error boundary'lerde karşılaşacaksın.

İşte çalıştıkça her metodu kaydeden bir class:

import { Component, useState } from 'react';

class Logger extends Component {
    constructor(props) {
        super(props);
        this.state = { clicks: 0 };
        console.log('constructor');
    }
    static getDerivedStateFromProps(props, state) {
        console.log('getDerivedStateFromProps');
        return null;
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate');
        return true;
    }
    getSnapshotBeforeUpdate() {
        console.log('getSnapshotBeforeUpdate');
        return null;
    }
    componentDidMount() {
        console.log('componentDidMount');
    }
    componentDidUpdate() {
        console.log('componentDidUpdate');
    }
    componentWillUnmount() {
        console.log('componentWillUnmount');
    }
    render() {
        console.log('render');
        return <button onClick={() => this.setState({ clicks: this.state.clicks + 1 })}>Clicks: {this.state.clicks}</button>;
    }
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            {show && <Logger />}
            <button onClick={() => setShow(!show)} style={{ marginInlineStart: 8 }}>Toggle</button>
        </div>
    );
}

Mount constructor, getDerivedStateFromProps, render, componentDidMount kaydeder. Bir tıklama getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate kaydeder. shouldComponentUpdate'in false döndürmesini sağla; tıklamalar düğmeyi güncellemeyi bırakır: state değişir, ama React render'ı atlar. Class bileşenleri sayfası bunun gibi bir class'ı bir fonksiyona nasıl dönüştüreceğini gösteriyor.

Yaşam döngüsüyle değil, senkronizasyonla düşün

Hook tablosu eski kodu okumak için kullanışlıdır, ama seni class alışkanlıklarını kopyalayan efektler yazmaya yöneltebilir; örneğin büyük bir "mount oldu" efekti ve büyük bir "güncellendi" efekti. Bir efekt daha iyi şöyle okunur: "bu dış şeyi bu değerlerle senkronize tut": roomId'ye bağlan ve roomId değiştiğinde bağlantıyı kesip yeniden bağlan. Senkronize ettiğin her şey için bir efekt yaz, kullandığı değerleri bağımlılık olarak listele ve onu ne zaman çalıştıracağına React karar versin.