React'te State'i Yukarı Taşımak: Bileşenler Arası State

State'i yukarı taşımak (lifting state up), state'i onu paylaşması gereken bileşenlerden çıkarıp en yakın ortak ebeveynlerine taşımak demektir. Ebeveyn değeri tutar, onu bir prop olarak aşağı aktarır ve çocukların onu değiştirmek için çağırdığı bir fonksiyon aktarır; böylece her çocuk state'in tek bir kopyasından render eder.

import { useState } from 'react';

function Panel({ title, isOpen, onOpen, children }) {
    return (
        <section style={{ borderBottom: '1px solid #ddd', padding: '8px 0' }}>
            <h3 style={{ margin: 0 }}>{title}</h3>
            {isOpen ? <p>{children}</p> : <button onClick={onOpen}>Show</button>}
        </section>
    );
}

export default function App() {
    const [openIndex, setOpenIndex] = useState(0);

    return (
        <div>
            <Panel title="Shipping" isOpen={openIndex === 0} onOpen={() => setOpenIndex(0)}>
                Orders ship within two days.
            </Panel>
            <Panel title="Returns" isOpen={openIndex === 1} onOpen={() => setOpenIndex(1)}>
                Return anything within 30 days.
            </Panel>
            <Panel title="Warranty" isOpen={openIndex === 2} onOpen={() => setOpenIndex(2)}>
                Two years on every product.
            </Panel>
        </div>
    );
}

Herhangi bir paneldeki "Show"a tıkla: o açılır, açık olan kapanır. Aynı anda yalnızca bir panel açık olabilir, çünkü buna paneller kendileri karar vermez. openIndex'i App tutar ve her Panel yalnızca isOpen'ı ve bir onOpen fonksiyonunu alır.

Sorun: aynı fikirde olması gereken state

Her panelin kendi isOpen state'ine sahip olduğu bariz sürümden başla. Her panel çalışır, ama paneller birbirinden habersizdir, bu yüzden ikisinin aynı anda açık olmasını hiçbir şey engellemez.

import { useState } from 'react';

function Panel({ title, children }) {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <section style={{ borderBottom: '1px solid #ddd', padding: '8px 0' }}>
            <h3 style={{ margin: 0 }}>{title}</h3>
            {isOpen ? <p>{children}</p> : <button onClick={() => setIsOpen(true)}>Show</button>}
        </section>
    );
}

export default function App() {
    return (
        <div>
            <Panel title="Shipping">Orders ship within two days.</Panel>
            <Panel title="Returns">Return anything within 30 days.</Panel>
        </div>
    );
}

İki paneli de aç: birlikte açık kalırlar. React'te state onu bildiren bileşene özeldir, bu yüzden bir kardeş onu okuyamaz ya da sıfırlayamaz. İki bileşenin aynı fikirde olması gerektiğinde state ikisinin de üstünde yaşamalıdır.

Üç adımda state'i yukarı taşımak

İkinci örneği birinciye dönüştürmek üç düzenleme alır.

1. State'i çocuktan kaldır. Panel içindeki useState'i sil ve bunun yerine isOpen'ı props'tan oku. Çocuk artık açık olup olmadığına karar vermez.
2. Ebeveynden değeri ve onu değiştirmenin bir yolunu aktar. Panel, isOpen'ı ve bir onOpen callback'ini alır. Çocuk düğmesine tıklandığında onOpen()'ı çağırır; ebeveynin bununla ne yaptığını bilmez.
3. State'i ortak ebeveyne ekle. App, openIndex'i bildirir ve onu her panel için props'a çevirir: isOpen={openIndex === 1} ve onOpen={() => setOpenIndex(1)}.

En yakın ortak ebeveyn, state'e ihtiyaç duyan tüm bileşenleri render eden en alttaki bileşendir. Burada bu App'tir. Paneller bir Faq bileşeninin içinde dursaydı state daha yükseğe değil, Faq'ya giderdi.

Taşımadan sonra Panel, kontrollü bir input'la aynı anlamda ebeveyni tarafından kontrol edilir: props'un söylediğini gösterir ve değişiklikleri bir callback aracılığıyla bildirir. Kontrollü ve kontrolsüz bileşenler sayfası aynı fikri form öğeleri için anlatıyor.

Tek doğruluk kaynağı

Ekranın iki parçası aynı olguyu gösterdiğinde o olguyu bir kez sakla ve diğer her şeyi ondan hesapla. Bir sıcaklık dönüştürücü klasik örnektir: Celsius ve Fahrenheit input'ları her zaman aynı fikirde olmalıdır, bu yüzden her biri kendi sayısını tutamaz.

import { useState } from 'react';

const round = (n) => Math.round(n * 10) / 10;
const toF = (c) => round((c * 9) / 5 + 32);
const toC = (f) => round(((f - 32) * 5) / 9);

function TemperatureInput({ label, value, onChange }) {
    return (
        <label style={{ display: 'block', marginBottom: 8 }}>
            {label}{' '}
            <input
                type="number"
                value={value}
                onChange={(e) => onChange(e.target.value)}
                style={{ width: 80 }}
            />
        </label>
    );
}

export default function App() {
    const [temp, setTemp] = useState({ value: '20', scale: 'c' });

    const number = Number(temp.value);
    const empty = temp.value === '';
    const celsius = temp.scale === 'c' || empty ? temp.value : toC(number);
    const fahrenheit = temp.scale === 'f' || empty ? temp.value : toF(number);

    return (
        <div>
            <TemperatureInput
                label="Celsius"
                value={celsius}
                onChange={(value) => setTemp({ value, scale: 'c' })}
            />
            <TemperatureInput
                label="Fahrenheit"
                value={fahrenheit}
                onChange={(value) => setTemp({ value, scale: 'f' })}
            />
            <p>{Number(celsius) >= 100 ? 'Water boils.' : 'Water does not boil.'}</p>
        </div>
    );
}

Herhangi bir alana yaz, diğeri onu takip eder. State tek bir olgudur: kullanıcının en son yazdığı sayı ve hangi ölçekte olduğu. Diğer alan render sırasında ondan hesaplanır, bu yüzden yazdığın alan her zaman tam olarak yazdığını korur. Başlangıç state'ini { value: '212', scale: 'f' } yap; input'ların altındaki mesaj "Water boils." olur.

Bir Celsius sayısını ve bir Fahrenheit sayısını iki state parçasında tutmak her işleyicinin ikisini de güncellemesi gerektiği anlamına gelirdi ve bir işleyici ilk unuttuğunda iki input farklı şeyler söylerdi. Saklanan tek bir değer kendisiyle çelişemez.

Setter'ı aşağı aktarmak

Bir çocuk ebeveynin state'ini yalnızca ebeveynin ona verdiği bir fonksiyon aracılığıyla değiştirebilir. Setter'ın kendisini (onSelect={setColor}) ya da daha fazlasını yapan bir fonksiyonu (onOpen={() => setOpenIndex(1)}) aktarabilirsin. Prop'a setSelected yerine onSelect ya da onChange gibi olay tarzı bir ad vermek, çocuğun ebeveynin değeri nasıl sakladığından habersiz kalmasını sağlar; böylece ebeveyn bunu daha sonra çocuğa dokunmadan değiştirebilir.

import { useState } from 'react';

function ColorPicker({ colors, selected, onSelect }) {
    return (
        <div>
            {colors.map((c) => (
                <button
                    key={c}
                    onClick={() => onSelect(c)}
                    style={{ background: c, color: 'white', border: selected === c ? '3px solid black' : 'none', marginInlineEnd: 4 }}
                >
                    {c}
                </button>
            ))}
        </div>
    );
}

function Preview({ color }) {
    return <p style={{ color, fontSize: 24, fontWeight: 700 }}>Hello in {color}</p>;
}

export default function App() {
    const [color, setColor] = useState('teal');

    function handleSelect(c) {
        console.log('App sets color to', c);
        setColor(c);
    }

    return (
        <div>
            <ColorPicker colors={['teal', 'tomato', 'slateblue']} selected={color} onSelect={handleSelect} />
            <Preview color={color} />
        </div>
    );
}

ColorPicker ve Preview birbiriyle hiç konuşmaz. Seçici bir seçimi yukarı bildirir, App onu saklar ve yeni değer ikisine de aşağı akar.

State ne zaman yukarı taşınmamalı

Taşımanın bir maliyeti vardır. State bir ebeveynde yaşadığında her değişiklik ebeveyni ve varsayılan olarak, state'i kullanmayanlar dahil tüm çocuklarını render eder. Yalnızca en yakın ortak ebeveyne kadar taşı ve yalnızca bir bileşenin kullandığı state'i o bileşenin içinde bırak.

import { useState } from 'react';

function SearchBox() {
    const [query, setQuery] = useState('');
    console.log('render SearchBox');
    return <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Type here" />;
}

function ProductList() {
    console.log('render ProductList');
    return (
        <ul>
            <li>Keyboard</li>
            <li>Mouse</li>
        </ul>
    );
}

export default function App() {
    return (
        <div>
            <SearchBox />
            <ProductList />
        </div>
    );
}

Kutuya yaz ve konsolu izle: her tuş vuruşunda yalnızca SearchBox render olur. Şimdi query'yi App'e taşı ve SearchBox'a props olarak aktar. Her tuş vuruşu artık ProductList'i de kaydeder, liste sorguyu kullanmasa bile. Liste sorguya göre filtreleme yapsaydı taşımak doğru karar olurdu, çünkü o zaman iki bileşen de aynı değere bağlı olurdu.

Sorulacak soru "bu değeri kimin okuması gerekiyor?" sorusudur. Cevap tek bir bileşense state orada kalır. Birkaç bileşense en yakın ortak ebeveynlerine gider.

Taşıma fazla ileri gittiğinde

Bazen en yakın ortak ebeveyn ağacın çok yukarısındadır ve değerin onu sadece ileten birkaç bileşenden geçirilmesi gerekir. Bu prop drilling'dir. Birkaç katman props sorun değildir ve takip etmesi kolaydır. Aynı değer birçok katmandan geçtiğinde ya da neredeyse her bileşenin ona ihtiyacı olduğunda (oturum açmış kullanıcı, tema, dil) onu elle aktarmak yerine useContext ile oku. Context değerin çocuklara nasıl ulaştığını değiştirir; state'in kendisi hâlâ tek bir ebeveynde yaşar, yani hâlâ yukarı taşınmıştır.