React Class Bileşenleri: State, Yaşam Döngüsü, Dönüştürme

Bir class bileşeni, React.Component'ten türeyen ve bir render() metodundan JSX döndüren bir JavaScript class'ıdır. Props'u this.props'tan okur, state'i this.state içinde tutar ve onu this.setState() ile günceller. Hook'lu fonksiyon bileşenleri yeni kod için onların yerini aldı, ama class'lar hâlâ tamamen desteklenir, birçok eski kod tabanında görünür ve bir error boundary yazmanın tek yoludur.

import { Component } from 'react';

class Counter extends Component {
    state = { count: 0 };

    render() {
        return (
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                {this.props.label}: {this.state.count}
            </button>
        );
    }
}

export default function App() {
    return (
        <div style={{ display: 'flex', gap: 8 }}>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

Her sayaç kendi state'ini tutar. Üçüncü bir <Counter label="Plums" /> ekle; o da 0'dan başlar.

Bir class bileşeninin anatomisi

import { Component } from 'react';

class Welcome extends Component {
    static defaultProps = { name: 'stranger' };

    constructor(props) {
        super(props); // required before using this
        this.state = { visits: 1 };
    }

    render() {
        return <h1>Hello, {this.props.name}. Visit #{this.state.visits}</h1>;
    }
}

• Class Component'ten (ya da import React from 'react' ile React.Component'ten) türer.
• render() zorunludur. Bir fonksiyon bileşeninin gövdesi gibi saf olmalıdır: this.props ve this.state'i oku, JSX döndür.
• this.props props'u tutar. Salt okunurdur.
• State bir constructor'da (önce super(props) çağır) ya da bugün daha yaygın olarak bir class alanı olarak ayarlanabilir: state = { visits: 1 };.
• static defaultProps React 19'da class'lar için hâlâ çalışır (yalnızca fonksiyon bileşenleri için kaldırıldı).

this.setState birleştirir ve bir updater alabilir

setState, useState setter'ından farklı iki şey yapar. Aktardığın nesneyi mevcut state ile birleştirir (merge), böylece yalnızca adını verdiğin anahtarları güncellersin. Ve her React state güncellemesi gibi hemen uygulanmaz, bu yüzden sonraki değer öncekine bağlı olduğunda updater biçimini kullan.

import { Component } from 'react';

class Profile extends Component {
    state = { name: 'Ada', likes: 0, address: { city: 'London', zip: 'NW1' } };

    addThreeWrong = () => {
        this.setState({ likes: this.state.likes + 1 });
        this.setState({ likes: this.state.likes + 1 });
        this.setState({ likes: this.state.likes + 1 });
    };

    addThreeRight = () => {
        this.setState((state) => ({ likes: state.likes + 1 }));
        this.setState((state) => ({ likes: state.likes + 1 }));
        this.setState((state) => ({ likes: state.likes + 1 }));
    };

    moveCity = () => {
        // The merge is shallow: this replaces the whole address object
        this.setState({ address: { city: 'Paris' } }, () => console.log('after update:', this.state.address));
    };

    render() {
        const { name, likes, address } = this.state;
        return (
            <div>
                <p>{name} has {likes} likes and lives in {address.city} ({address.zip || 'no zip'}).</p>
                <button onClick={this.addThreeWrong}>+3 with objects</button>
                <button onClick={this.addThreeRight}>+3 with updaters</button>
                <button onClick={this.moveCity}>Move to Paris</button>
            </div>
        );
    }
}

export default function App() {
    return <Profile />;
}

"+3 with objects" bir ekler, çünkü üç çağrı da aynı this.state.likes'ı okur. "+3 with updaters" üç ekler. "Move to Paris" name ve likes'ı korur (birleştirme) ama zip'i kaybeder, çünkü birleştirme bir seviye derindir. Onu korumak için address: { ...this.state.address, city: 'Paris' } yaz. setState'in isteğe bağlı ikinci argümanı güncellemeden sonra çalışır ve konsol yeni adresi orada gösterir.

Olay işleyicilerini bağlamak

onClick={this.handleClick} olarak aktarılan bir metot sonra nesnesi olmadan düz bir fonksiyon olarak çağrılır, bu yüzden içindeki this undefined'dır.

// This throws when you press the first button: this is undefined in an unbound method.
import { Component } from 'react';

class Toggle extends Component {
    state = { on: false };

    handleClickBroken() {
        this.setState({ on: !this.state.on });
    }

    handleClickArrow = () => {
        this.setState({ on: !this.state.on });
    };

    render() {
        return (
            <div>
                <button onClick={this.handleClickBroken}>Broken method</button>
                <button onClick={this.handleClickArrow}>Class field arrow</button>
                <p>The switch is {this.state.on ? 'on' : 'off'}.</p>
            </div>
        );
    }
}

export default function App() {
    return <Toggle />;
}

İlk düğme undefined'ın setState'ini okumakla ilgili bir TypeError kaydeder. İkincisi çalışır, çünkü bir class alanındaki ok fonksiyonu örnek oluşturulduğunda this'i yakalar. Eski kodda hâlâ yaygın olan eski çözüm constructor'da bağlar:

constructor(props) {
    super(props);
    this.state = { on: false };
    this.handleClick = this.handleClick.bind(this);
}

Satır içi bir ok fonksiyonu, onClick={() => this.handleClick()}, da çalışır.

Yaşam döngüsü metotları

Class'lar mount, update ve unmount'a sabit adlı metotlarla tepki verir. En çok göreceklerin:

• componentDidMount(): ilk render DOM'a girdikten sonra. Zamanlayıcıları, abonelikleri, istekleri başlat.
• componentDidUpdate(prevProps, prevState): her güncellemeden sonra. İş yapmadan önce önceki değerlerle karşılaştır, yoksa döngüye girersin.
• componentWillUnmount(): kaldırılmadan önce. componentDidMount'un başlattığını geri al.
• shouldComponentUpdate(nextProps, nextState): bir render'ı atlamak için false döndür.

Bileşen yaşam döngüsü sayfasında tam liste, çalışma sıraları ve her birini kaydeden bir bileşen var.

Bir class'ı fonksiyon bileşenine dönüştürmek

İşte üç yaygın yaşam döngüsü metodunun hepsini kullanan bir class. Her saniye tik atar, label prop'u değiştiğinde kayıt yazar ve kaldırıldığında zamanlayıcısını durdurur.

import { Component, useState } from 'react';

class Timer extends Component {
    state = { seconds: 0 };

    componentDidMount() {
        this.intervalId = setInterval(this.tick, 1000);
    }

    componentDidUpdate(prevProps) {
        if (prevProps.label !== this.props.label) {
            console.log('label changed to', this.props.label);
        }
    }

    componentWillUnmount() {
        clearInterval(this.intervalId);
    }

    tick = () => {
        this.setState((state) => ({ seconds: state.seconds + 1 }));
    };

    render() {
        return <p>{this.props.label}: {this.state.seconds}s</p>;
    }
}

export default function App() {
    const [label, setLabel] = useState('Reading');
    return (
        <div>
            <button onClick={() => setLabel(label === 'Reading' ? 'Writing' : 'Reading')}>Change label</button>
            <Timer label={label} />
        </div>
    );
}

Ve aynı bileşen bir fonksiyon olarak. Her yaşam döngüsü metodu bir efektin parçası olur ve ilişkili kurulum ile temizleme iki metotta değil yan yana durur.

import { useEffect, useState } from 'react';

function Timer({ label }) {
    const [seconds, setSeconds] = useState(0);

    // componentDidMount + componentWillUnmount
    useEffect(() => {
        const intervalId = setInterval(() => setSeconds((s) => s + 1), 1000);
        return () => clearInterval(intervalId);
    }, []);

    // componentDidUpdate for label (this also runs once after mount)
    useEffect(() => {
        console.log('label is', label);
    }, [label]);

    return <p>{label}: {seconds}s</p>;
}

export default function App() {
    const [label, setLabel] = useState('Reading');
    return (
        <div>
            <button onClick={() => setLabel(label === 'Reading' ? 'Writing' : 'Reading')}>Change label</button>
            <Timer label={label} />
        </div>
    );
}

İki zamanlayıcı da aynı şekilde sayar ve her etiket değişikliğinde kayıt yazar. Fonksiyon sürümü mount'ta da bir kez kayıt yazar, çünkü bir efekt ilk render'dan sonra da çalışır. Herhangi bir dönüştürme için adımlar:

1. this.props.x, destructure edilmiş bir prop olur: { x }.
2. this.state'in her anahtarı kendi useState'i olur. Setter'ın birleştirmek yerine değiştirdiğini unutma.
3. Metotlar bileşenin içinde düz fonksiyonlar olur. Bağlamaya gerek yok.
4. componentDidMount, componentDidUpdate ve componentWillUnmount, ne zaman çalıştıklarına göre değil ne yaptıklarına göre gruplanmış useEffect çağrıları olur.
5. createRef, useRef olur; this.context ile static contextType de useContext ya da use olur.

Error boundary'leri class olarak bırak; fonksiyon karşılıkları yoktur.

PureComponent

Normal bir class bileşeni ebeveyni her render olduğunda render olur. PureComponent önce yeni props ve state'i öncekilerle bir seviye derinlikte karşılaştırır ve hiçbir şey değişmediğinde render'ı atlar. React.memo'nun class karşılığıdır.

import { Component, PureComponent, useState } from 'react';

class PlainLabel extends Component {
    render() {
        console.log('PlainLabel rendered');
        return <p>Plain: {this.props.text}</p>;
    }
}

class PureLabel extends PureComponent {
    render() {
        console.log('PureLabel rendered');
        return <p>Pure: {this.props.text}</p>;
    }
}

export default function App() {
    const [clicks, setClicks] = useState(0);
    return (
        <div>
            <button onClick={() => setClicks(clicks + 1)}>Re-render the parent ({clicks})</button>
            <PlainLabel text="hello" />
            <PureLabel text="hello" />
        </div>
    );
}

Düğmeye tıkla: yalnızca PlainLabel rendered kaydedilir, çünkü PureLabel aynı text'i görür. İkisine de text={'hello ' + clicks} aktar; ikisi de her tıklamada render olur.

Karşılaştırma sığdır, bu yüzden ebeveynin her render'ında yeni bir nesne ya da fonksiyon olan bir prop (style={{ color: 'red' }}, onClick={() => ...}) onu boşa çıkarır. Bu, React.memo'daki tuzağın aynısıdır.

React 19'un class'lardan kaldırdıkları

Eski class kodunun bakımını yapıyorsan birkaç kalıp React 19'da artık çalışmaz:

• String ref'ler (this.refs.input ile ref="input"). createRef() ya da bir ref callback'i kullan.
• Eski context (contextTypes, childContextTypes, getChildContext). static contextType ile createContext kullan.
• propTypes yok sayılır. TypeScript ya da kendi kontrollerini kullan.
• findDOMNode kaldırıldı. Bunun yerine DOM öğesine bir ref koy.

Eski componentWillMount, componentWillReceiveProps ve componentWillUpdate metotları da eskidir. Hem eski adlarıyla hem de UNSAFE_ adlarıyla (UNSAFE_componentWillMount vb.) hâlâ çalışırlar, ama kullanımdan kaldırılmışlardır ve StrictMode onlar hakkında uyarır; kodlarını componentDidMount'a, componentDidUpdate'e ya da getDerivedStateFromProps'a taşı.