React use Hook'u: Render'da Promise ve Context Okumak

use, bir bileşen render olurken bir promise'ten ya da bir context'ten bir değer okuyan bir React 19 API'sidir. use(promise), bileşeni promise resolve olana kadar duraklatır ve bu arada en yakın <Suspense> yedek içeriğini gösterir; use(context) ise useContext gibi çalışır ama bir if'in ya da bir döngünün içinde durabilir.

Aşağıdaki fetchUser fonksiyonu gerçek bir isteğin yerine geçer.

import { Suspense, use, useState } from 'react';

function fetchUser(id) {
    console.log('fetching user', id);
    return new Promise((resolve) =>
        setTimeout(() => resolve({ id, name: id === 1 ? 'Ada' : 'Linus' }), 1000),
    );
}

function Profile({ userPromise }) {
    const user = use(userPromise);
    return <p>User #{user.id}: {user.name}</p>;
}

export default function App() {
    const [userPromise, setUserPromise] = useState(() => fetchUser(1));

    return (
        <div>
            <button onClick={() => setUserPromise(fetchUser(1))}>User 1</button>
            <button onClick={() => setUserPromise(fetchUser(2))}>User 2</button>
            <Suspense fallback={<p>Loading...</p>}>
                <Profile userPromise={userPromise} />
            </Suspense>
        </div>
    );
}

İlk render bir saniye boyunca "Loading..." gösterir, sonra profili. User 2'ye tıkla: yeni promise beklemedeyken yedek içerik geri gelir. Profile'ın kendine ait bir yükleme state'i yoktur; veri zaten oradaymış gibi yazılmıştır.

use(promise) nasıl çalışır

Profile, use(userPromise) çağırdığında:

• Promise resolve olduysa use değerini döndürür ve render devam eder.
• Hâlâ beklemedeyse React Profile'ı render etmeyi durdurur ve üstündeki en yakın <Suspense>'in yedek içeriğini gösterir. Promise sonuçlandığında React Profile'ı yeniden render eder ve bu sefer use değeri döndürür.
• Reddedildiyse React bunun yerine en yakın error boundary'yi gösterir.

React sonucu promise nesnesinin kendisinde hatırlar. Promise'in bir sonraki render'da aynı nesne olması gerekmesinin nedeni budur.

Sonraki profil yüklenirken eski profili ekranda tutmak için promise'i bir transition içinde ayarla. React o zaman yedek içeriği yeniden göstermek yerine bekler:

<button onClick={() => startTransition(() => setUserPromise(fetchUser(2)))}>User 2</button>

Promise nerede oluşturulmalı

İnsanları tökezleten kısım budur. Veri çekme çağrısını onu okuyan bileşenin içine yazmak doğal görünür ve çalışmaz:

// Do not do this
function Profile({ id }) {
    const user = use(fetchUser(id)); // a new promise on every render
    return <p>{user.name}</p>;
}

Her render fetchUser'ı çağırır ve yeni, beklemede bir promise alır. Profile askıya alınır. O promise resolve olduğunda React Profile'ı yeniden render eder, bu da beklemede başka bir promise oluşturur ve yeniden askıya alınır. Bileşen veriyi hiç göstermez ve ağ sekmesi isteklerle dolar.

Promise'i okuyucunun her render'ında yeniden çalışmayan bir yerde oluştur:

• Bir ebeveynde, state'te tutulan (ilk örnekteki gibi) ya da bir olay işleyicisinde oluşturulan.
• Modül düzeyinde, veri props'a bağlı olmadığında: bileşenin üstünde const configPromise = fetchConfig();.
• Argümanlara göre anahtarlanmış bir önbellekte, böylece aynı id aynı promise'i döndürür.
• Bir framework'te: bir Server Component bir istemci bileşenine bir promise'i prop olarak aktarabilir, rota loader'ları da aynısını yapar. use'un tasarlandığı durum budur.

İşte önbellek sürümü; böylece bir bileşen veriyi id ile isteyip yine de sabit bir promise alabilir:

import { Suspense, use, useState } from 'react';

const cache = new Map();
function getWeather(city) {
    if (!cache.has(city)) {
        console.log('request for', city);
        // Stands in for a real request
        cache.set(city, new Promise((resolve) => setTimeout(() => resolve(`${city.length * 3} °C`), 800)));
    }
    return cache.get(city);
}

function Weather({ city }) {
    const temperature = use(getWeather(city));
    return <p>{city}: {temperature}</p>;
}

export default function App() {
    const [city, setCity] = useState('Lisbon');

    return (
        <div>
            {['Lisbon', 'Oslo', 'Cairo'].map((c) => (
                <button key={c} onClick={() => setCity(c)}>{c}</button>
            ))}
            <Suspense fallback={<p>Loading weather...</p>}>
                <Weather city={city} />
            </Suspense>
        </div>
    );
}

Üç şehir arasında tıkla, sonra zaten açtığın birine geri dön. Konsol şehir başına bir istek kaydeder ve daha önce gördüğün bir şehir yedek içerik olmadan görünür, çünkü promise'i zaten resolve olmuştur. if (!cache.has(city)) kontrolünü sil; bileşen yeniden sonsuza kadar askıya alınmaya başlar.

Gerçek bir önbelleğin girişleri sona erdirmenin bir yoluna da ihtiyacı vardır. Veri kütüphaneleri ve framework'ler bunu halleder; çoğu uygulamanın promise'lerini birinden almasının nedeni budur.

use(context), bir if içinde bile

use(SomeContext), useContext(SomeContext) ile aynı değeri döndürür. Fark onu nerede çağırabildiğindedir. Diğer tüm hook'lar en üst düzeyde, her render'da aynı sırayla çalışmalıdır (hook kuralları). use erken bir return'den sonra, bir koşulun içinde ya da bir döngüde çağrılabilir.

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

const UserContext = createContext(null);

function Greeting({ showName }) {
    if (!showName) {
        return <p>Hello!</p>;
    }
    const user = use(UserContext);
    return <p>Hello, {user.name}!</p>;
}

export default function App() {
    const [showName, setShowName] = useState(false);

    return (
        <UserContext value={{ name: 'Grace' }}>
            <button onClick={() => setShowName(!showName)}>
                {showName ? 'Hide' : 'Show'} the name
            </button>
            <Greeting showName={showName} />
        </UserContext>
    );
}

İki dal arasında geçiş yapmak için düğmeye tıkla. use(UserContext)'i useContext(UserContext) ile değiştir; kod hook kurallarını çiğner, çünkü hook bazı render'larda çalışır, bazılarında çalışmaz.

use'un yine de sınırları vardır: onu yalnızca bir bileşeni render ederken ya da bir özel hook'un içinde çağır. Bir olay işleyicisinde ya da bir efektte context'i render sırasında zaten aldığın bir değerle oku.

Hatalar: try/catch değil, error boundary'ler

Promise reddedildiğinde hata, bir render hatası gibi en yakın error boundary'ye gider.

// This throws on purpose: the second request rejects and the boundary shows it.
import { Component, Suspense, use, useState } from 'react';

function fetchPost(id) {
    // Stands in for a real request. Post 2 does not exist.
    return new Promise((resolve, reject) =>
        setTimeout(() => (id === 2 ? reject(new Error('Post 2 not found')) : resolve(`Post ${id} body`)), 600),
    );
}

class ErrorBoundary extends Component {
    state = { error: null };
    static getDerivedStateFromError(error) {
        return { error };
    }
    render() {
        if (this.state.error) return <p style={{ color: 'crimson' }}>{this.state.error.message}</p>;
        return this.props.children;
    }
}

function Post({ postPromise }) {
    return <p>{use(postPromise)}</p>;
}

export default function App() {
    const [id, setId] = useState(1);
    const [postPromise, setPostPromise] = useState(() => fetchPost(1));

    function open(next) {
        setId(next);
        setPostPromise(fetchPost(next));
    }

    return (
        <div>
            <button onClick={() => open(1)}>Post 1</button>
            <button onClick={() => open(2)}>Post 2</button>
            <ErrorBoundary key={id}>
                <Suspense fallback={<p>Loading...</p>}>
                    <Post postPromise={postPromise} />
                </Suspense>
            </ErrorBoundary>
        </div>
    );
}

Post 2'yi aç; boundary hata mesajını gösterir. Post 1'i yeniden aç; çalışır: key={id} boundary'ye her gönderi için taze bir state verir, böylece eski hatayı göstermeye devam etmez.

Beklemede ya da reddedilmiş bir use'u try/catch ile yakalayamazsın. Promise beklemedeyken use özel bir değer fırlatarak render'ı keser ve etrafındaki bir catch bunu yutardı. Yakalanan değer, mesajı "Suspense Exception: This is not a real error!" ile başlayan bir hatadır ve geliştirmede React ayrıca "use was called from inside a try/catch block" kaydeder. Bir hata ekranı yerine bir yedek değer göstermek için reddedilmeyi promise'i aşağı aktarmadan önce ele al:

const postPromise = fetchPost(id).catch(() => 'This post could not be loaded.');

useEffect ile veri çekmeye kıyasla use

Klasik istemci kalıbı bir efektte veri çeker ve üç state parçası tutar:

function Profile({ id }) {
    const [user, setUser] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        let ignore = false;
        fetchUser(id).then(
            (u) => !ignore && setUser(u),
            (e) => !ignore && setError(e),
        );
        return () => {
            ignore = true;
        };
    }, [id]);

    if (error) return <p>Error</p>;
    if (!user) return <p>Loading...</p>;
    return <p>{user.name}</p>;
}

Efekt sürümü kendi kendine yeter; framework'süz uygulamalarda hâlâ en yaygın yaklaşım olmasının nedeni budur; veri çekme sayfası onu bütünüyle anlatıyor. use, bileşenin üstündeki bir şey isteği erken başlatıp promise'i aşağı verdiğinde parlar.