React'te Prop Drilling: Nedir ve Nasıl Önlenir

Prop drilling, bir prop'u yalnızca ağacın daha aşağısındaki bir bileşen kullanabilsin diye onu kullanmayan bileşenlerden geçirmektir. Burada user, onu okuyan tek bileşen olan Avatar'a ulaşmak için App'ten Page ve Sidebar üzerinden yolculuk eder.

import { useState } from 'react';

function Avatar({ user }) {
    return <strong>{user.name}</strong>;
}

function Sidebar({ user }) {
    console.log('Sidebar got user, but only passes it on');
    return (
        <aside style={{ padding: 8, background: '#f3f3f3' }}>
            Signed in as <Avatar user={user} />
        </aside>
    );
}

function Page({ user }) {
    console.log('Page got user, but only passes it on');
    return (
        <main>
            <h3>Dashboard</h3>
            <Sidebar user={user} />
        </main>
    );
}

export default function App() {
    const [user, setUser] = useState({ name: 'Ada' });
    return (
        <div>
            <button onClick={() => setUser({ name: user.name === 'Ada' ? 'Linus' : 'Ada' })}>
                Switch user
            </button>
            <Page user={user} />
        </div>
    );
}

Dört seviye ve yalnızca sonuncusu user ile ilgileniyor. Console, Page ve Sidebar'ın hiç göstermedikleri bir değer için çalıştığını gösterir. Düğmeye tıkla; yeniden kayıt yazarlar.

Neden zarar verir

İki üç seviye sorun değil. Ağaç büyüdükçe prop drilling bir sorun hâline gelir:

• Ortadaki bileşenler kullanmadıkları props'u taşır. Page ve Sidebar'ın imzasında artık bir user prop'u var, bu yüzden onları ne işe yaradığını merak etmeden okuyamazsın.
• Her değişiklik her katmana dokunur. user.avatarUrl ya da onLogout gibi ikinci bir değer ekle; yalnızca iki ucu değil, yoldaki her bileşeni düzenlersin.
• Bir bileşeni taşımak zinciri koparır. Avatar'ı farklı bir dala taşı; user'ı yeni bir yoldan geçirmen gerekir.
• Bir prop'u düşürmek kolaydır. Bir katmanda onu iletmeyi unut; derindeki bileşen undefined alır ve onu kaybeden katmanda hiçbir hata olmaz.

Dene: App'e Avatar'ın çağırması gereken bir onLogout fonksiyonu ekle. Dört bileşenin hepsini düzenleyeceksin.

Çözüm 1: children ile composition

İnsanların atladığı çözüm budur. Derindeki bir bileşen onunla render edebilsin diye veriyi aşağı aktarmak yerine, verinin sahibi olan bileşenin derindeki bileşeni kendisinin render etmesine izin ver ve bitmiş öğeyi children (ya da başka bir prop) olarak aşağı aktar. Ortadaki katmanlar bir yuva render eder ve user'ı hiç görmez.

import { useState } from 'react';

function Avatar({ user }) {
    return <strong>{user.name}</strong>;
}

function Sidebar({ children }) {
    console.log('Sidebar rendered');
    return <aside style={{ padding: 8, background: '#f3f3f3' }}>{children}</aside>;
}

function Page({ sidebar }) {
    console.log('Page rendered');
    return (
        <main>
            <h3>Dashboard</h3>
            {sidebar}
        </main>
    );
}

export default function App() {
    const [user, setUser] = useState({ name: 'Ada' });
    return (
        <div>
            <button onClick={() => setUser({ name: user.name === 'Ada' ? 'Linus' : 'Ada' })}>
                Switch user
            </button>
            <Page
                sidebar={
                    <Sidebar>
                        Signed in as <Avatar user={user} />
                    </Sidebar>
                }
            />
        </div>
    );
}

Page ve Sidebar artık bir kullanıcının var olduğunu bilmiyor. App, Avatar'ı user'ın yaşadığı yerde oluşturur ve hazır bir öğe olarak aşağı verir. Bunlar gibi yerleşim bileşenleri yeniden kullanılabilir hâle gelir ve onLogout eklemek artık yalnızca App ile Avatar'da bir değişikliktir. İkisi de hâlâ her tıklamada kayıt yazar, çünkü App her render olduğunda onlara yeni bir öğe aktarır: composition kodu sadeleştirir, render sayısını değil. children sayfası daha fazla yuva kalıbını anlatıyor.

Composition, verinin sahibi olan bileşen derindeki parçanın nasıl görüneceğine de karar verebildiğinde çalışır. Derindeki bileşen sahibinin render etmediği bir kütüphanenin ya da yapının içinde durduğunda yardımcı olmaz.

Çözüm 2: context

Farklı derinliklerdeki birçok bileşenin aynı değere (tema, oturum açmış kullanıcı, mevcut dil) ihtiyacı olduğunda onu context'e koy. Provider'ın altındaki her bileşen onu useContext ile okur ve aradaki hiçbir şey değişmez.

import { createContext, useContext, useState } from 'react';

const UserContext = createContext(null);

function Avatar() {
    const user = useContext(UserContext);
    return <strong>{user.name}</strong>;
}

function Greeting() {
    const user = useContext(UserContext);
    return <p>Welcome back, {user.name}.</p>;
}

function Sidebar() {
    return (
        <aside style={{ padding: 8, background: '#f3f3f3' }}>
            Signed in as <Avatar />
        </aside>
    );
}

function Page() {
    return (
        <main>
            <Greeting />
            <Sidebar />
        </main>
    );
}

export default function App() {
    const [user, setUser] = useState({ name: 'Ada' });
    return (
        <UserContext value={user}>
            <button onClick={() => setUser({ name: user.name === 'Ada' ? 'Linus' : 'Ada' })}>
                Switch user
            </button>
            <Page />
        </UserContext>
    );
}

Avatar ve Greeting kullanıcıyı iki farklı derinlikten okur, Page ve Sidebar ise hiç props almaz. Page'in altında herhangi bir yere üçüncü bir okuyucu ekle; gerisine dokunmadan çalışır. Maliyeti: veri akışı artık props'ta görünmez ve değer değiştiğinde her okuyucu render olur. useContext sayfası provider'ları, varsayılanları ve bu yeniden render'ları anlatıyor.

Çözüm 3: bir state kütüphanesi

Birçok bileşenin okuduğu ve sık değişen büyük uygulama state'i için (bir sepet, bir belge editörü, canlı veri) Redux Toolkit, Zustand ya da Jotai gibi bir state kütüphanesi her bileşenin yalnızca kullandığı parçaya abone olmasını sağlar. Bu hem drilling'i hem de tek büyük bir context'in "her tüketici render olur" maliyetini önler. Aynı zamanda başka bir bağımlılık ve başka bir kavram setidir, bu yüzden ona üç seviye yolculuk eden bir prop'u düzeltmek için değil, ilk iki çözüm yetmez olduğunda başvur.

// Zustand, for comparison (not available in the editor here)
const useCart = create((set) => ({
    items: [],
    add: (item) => set((s) => ({ items: [...s.items, item] })),
}));

function CartCount() {
    const count = useCart((s) => s.items.length); // renders only when the count changes
    return <span>{count}</span>;
}

Prop drilling ne zaman sorun değildir

Props aktarmak React'te verinin akış biçimidir ve okunması en kolay kalıptır: bir değeri JSX'e bakarak en üstten en alta kadar izleyebilirsin. Bir kısmını kullanan bir iki bileşenden ya da birbiriyle yakından ilişkili bileşenlerden oluşan kısa bir zincirden geçen bir prop çözülmesi gereken bir sorun değildir. State'i en yakın ortak ebeveyne taşı, aşağı aktar ve yaklaşımını yalnızca ortadaki katmanlar hiçbir işe yaramayan props taşımaya başladığında değiştir.