React 19: Yeni Özellikler, Kaldırılan API'ler ve Yükseltme

React 19, Aralık 2024'te yayınlanan React ana sürümüdür. Actions (bekleme durumunu, hataları ve formları yöneten async fonksiyonlar), useActionState, useOptimistic ve use hook'larını, normal bir prop olarak ref'i ve React'in belgenin head bölümüne taşıdığı <title> ile <meta> etiketlerini ekler. React 19.2 (Ekim 2025) <Activity> ve useEffectEvent'i ekledi.

Aşağıdaki her örnek React 19.2 üzerinde çalışır. İşte bir Action: bir forma aktarılan, bekleme durumu ve döndürülen hatası useActionState tarafından yönetilen async bir fonksiyon.

import { useActionState } from 'react';

function saveName(name) {
    // Stands in for a real request
    return new Promise((resolve) => setTimeout(resolve, 800));
}

async function updateName(previousState, formData) {
    const name = formData.get('name').trim();
    if (!name) {
        return { error: 'Please type a name.', saved: previousState.saved };
    }
    await saveName(name);
    return { error: null, saved: name };
}

export default function App() {
    const [state, formAction, isPending] = useActionState(updateName, {
        error: null,
        saved: null,
    });

    return (
        <form action={formAction}>
            <input name="name" placeholder="Your name" />
            <button type="submit" disabled={isPending}>
                {isPending ? 'Saving...' : 'Save'}
            </button>
            {state.error && <p style={{ color: 'crimson' }}>{state.error}</p>}
            {state.saved && <p>Saved as {state.saved}.</p>}
        </form>
    );
}

Hatayı görmek için alan boşken Save'e bas, sonra bir ad yaz ve kaydet: düğme 800 ms boyunca "Saving..." der. Hata için useState, isLoading bayrağı ve e.preventDefault() yoktur.

Actions ve form action'ları

React 18'de her form için aynı adımları yazıyordun: varsayılan gönderimi engelle, bir yükleme bayrağı ayarla, isteği bekle, bir hatayı sakla, bayrağı temizle. React 19, bir transition içinde async iş yapan bir fonksiyona Action der ve bu hesap işini senin için yapar.

• startTransition (ve useTransition) artık async bir fonksiyon kabul eder. isPending, tüm fonksiyon bitene kadar true kalır.
• <form action={fn}>, form gönderildiğinde fn'i formun FormData'sı ile çağırır. Bir Action olarak çalışır ve bittikten sonra React formun kontrolsüz alanlarını sıfırlar.
• <button formAction={fn}> tek bir gönder düğmesine kendi action'ını verir.
• useActionState, action'ın en son döndürdüğü değeri tutar; böylece bir action bir hata mesajı ya da kaydedilmiş kaydı döndürebilir.
• react-dom'dan useFormStatus, bir formun içindeki bir bileşenin props aşağı aktarmadan o formun gönderilip gönderilmediğini okumasını sağlar. Bir ebeveyn <form>'a ihtiyaç duyar, bu yüzden burada statik bir blokta görünüyor:

import { useFormStatus } from 'react-dom';

function SubmitButton() {
    const { pending } = useFormStatus();
    return <button disabled={pending}>{pending ? 'Sending...' : 'Send'}</button>;
}

useOptimistic

useOptimistic, bir Action hâlâ çalışırken beklediğin sonucu gösterir ve Action bittiğinde gerçek state'e geri döner. Bir beğeni sayacı tıkladığın anda artabilir ve istek başarısız olursa geri düşebilir.

const [optimisticLikes, addOptimisticLike] = useOptimistic(likes, (current, delta) => current + delta);

useOptimistic sayfasında bilerek başarısız olan sahte bir API ile çalıştırılabilir bir örnek var, böylece geri almayı izleyebilirsin.

use API'si

use, bir promise'ten ya da bir context'ten bir değer okur. Bir promise ile bileşeni promise resolve olana kadar askıya alır ve en yakın <Suspense> bu arada yedek içeriğini gösterir. Diğer tüm hook'ların aksine use bir if'in ya da bir döngünün içinde ve erken bir return'den sonra çağrılabilir.

React 19 ayrıca <ThemeContext.Provider> yerine doğrudan <ThemeContext value="dark"> render etmene izin verir. İkisi de bu örnekte görünüyor:

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

const ThemeContext = createContext('light');

function Badge({ show }) {
    if (!show) return null;
    // A normal hook could not be called after an early return. use can.
    const theme = use(ThemeContext);
    const dark = theme === 'dark';
    return (
        <span style={{ padding: '2px 8px', background: dark ? '#222' : '#eee', color: dark ? '#fff' : '#222' }}>
            Theme: {theme}
        </span>
    );
}

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

    return (
        <ThemeContext value={theme}>
            <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Switch theme</button>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} badge</button>
            <p>
                <Badge show={show} />
            </p>
        </ThemeContext>
    );
}

Prop olarak ref ve ref temizlemesi

Bir fonksiyon bileşeni artık ref'i diğer her prop gibi alır. Bir ref'i bir DOM öğesine iletmek için onu artık forwardRef ile sarman gerekmez.

import { useRef } from 'react';

function TextField({ label, ref }) {
    return (
        <label>
            {label} <input ref={ref} />
        </label>
    );
}

export default function App() {
    const inputRef = useRef(null);

    return (
        <div>
            <TextField label="Email" ref={inputRef} />
            <button onClick={() => inputRef.current.focus()}>Focus the field</button>
        </div>
    );
}

Bir ref callback'i ayrıca bir temizleme fonksiyonu döndürebilir. React onu öğe ekrandan ayrıldığında çağırır, tıpkı bir efektin temizlemesi gibi. Hiçbir şey döndürmeyen bir callback, React 18'deki gibi kaldırılırken yine null ile çağrılır.

import { useState } from 'react';

export default function App() {
    const [visible, setVisible] = useState(true);

    return (
        <div>
            <button onClick={() => setVisible(!visible)}>{visible ? 'Remove' : 'Add'} the box</button>
            {visible && (
                <div
                    ref={(node) => {
                        console.log('attached to', node.tagName);
                        return () => console.log('cleanup: detached');
                    }}
                    style={{ marginTop: 8, padding: 12, background: '#e8f0fe' }}
                >
                    A box with a ref
                </div>
            )}
        </div>
    );
}

Düğmeye birkaç kez tıkla ve konsolu oku: her kaldırma temizleme satırını, her geri dönüş attached to DIV'i kaydeder.

Belge meta verisi

<title>, <meta> ve <link>'i bir bileşenin herhangi bir yerinde render edebilirsin, React de onları <head>'e taşır. Bir sayfa bileşeni react-helmet gibi bir kütüphane olmadan kendi başlığını ayarlayabilir.

import { useEffect, useState } from 'react';

function Article({ title }) {
    return (
        <article>
            <title>{title}</title>
            <meta name="description" content={`An article about ${title}`} />
            <h3>{title}</h3>
        </article>
    );
}

export default function App() {
    const [title, setTitle] = useState('Hooks');

    useEffect(() => {
        console.log('document.title is now:', document.title);
    }, [title]);

    return (
        <div>
            <button onClick={() => setTitle(title === 'Hooks' ? 'Actions' : 'Hooks')}>Open the other article</button>
            <Article title={title} />
        </div>
    );
}

Önizlemenin gösterecek bir tarayıcı sekmesi yok, bu yüzden efekt bunun yerine document.title'ı kaydeder. Makaleler arasında geçiş yap; kaydedilen başlık takip eder.

Stil dosyaları da aynı muameleyi gördü: bir bileşenin içindeki <link rel="stylesheet" href="..." precedence="default" /> head'e bir kez, öncelik sırasına göre eklenir ve React ona ihtiyaç duyan içeriği göstermeden önce onu bekler. Birkaç bileşenin render ettiği bir <script async src="..."> yalnızca bir kez yüklenir. react-dom ayrıca kaynak ipuçları için preload, preinit, preconnect ve prefetchDNS export eder.

Activity ve useEffectEvent (React 19.2)

<Activity mode="hidden"> çocuklarını state'lerini atmadan gizler. React DOM'u gizler, efektlerin temizlemelerini çalıştırır ve mod yeniden "visible" olduğunda her şeyi geri getirir. Kullanıcının geri gelmesini beklediğin sekmelere ve panellere uyar.

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

function Notes() {
    const [text, setText] = useState('');
    useEffect(() => {
        console.log('Notes effect: setup');
        return () => console.log('Notes effect: cleanup');
    }, []);
    return <textarea value={text} onChange={(e) => setText(e.target.value)} rows={3} placeholder="Type a note" />;
}

export default function App() {
    const [tab, setTab] = useState('notes');

    return (
        <div>
            <button onClick={() => setTab('notes')}>Notes</button>
            <button onClick={() => setTab('about')}>About</button>
            <div style={{ marginTop: 8 }}>
                <Activity mode={tab === 'notes' ? 'visible' : 'hidden'}>
                    <Notes />
                </Activity>
                {tab === 'about' && <p>Your note is kept while this tab is open.</p>}
            </div>
        </div>
    );
}

Bir not yaz, About'a geç ve geri dön. Metin hâlâ oradadır ve konsol efektin gizliyken temizlendiğini gösterir. <Activity> sarmalayıcısını {tab === 'notes' && <Notes />} ile değiştir; not her geçişte kaybolur.

useEffectEvent bir fonksiyonu bir efektin bağımlılıklarının dışına çıkarır. Fonksiyon her zaman en son props ve state'i görür, ama onları değiştirmek efekti yeniden başlatmaz:

function ChatRoom({ roomId, theme }) {
    const onConnected = useEffectEvent(() => {
        showNotification('Connected!', theme);
    });

    useEffect(() => {
        const connection = createConnection(roomId);
        connection.on('connected', () => onConnected());
        connection.connect();
        return () => connection.disconnect();
    }, [roomId]); // theme is not a dependency
}

19.2 ayrıca Server Components için cacheSignal'ı (bir cache() sonucuna artık ihtiyaç olmadığında sana söyler) ve Chrome DevTools performans panelinde Performance Tracks'i ekledi. React 19.1, mevcut bileşeni hangi bileşenlerin render ettiğini döndüren, yalnızca geliştirme için bir fonksiyon olan captureOwnerStack'i ekledi.

Server Components ve Server Functions

Server Components, sunucuda (ya da derleme zamanında) önceden çalışan ve çıktılarını tarayıcıya gönderen bileşenlerdir. async olabilir ve bir veritabanını doğrudan okuyabilirler; kodları asla istemciye gönderilmez. Server Functions (ilk adıyla Server Actions), bir istemci bileşeninin normal bir fonksiyon gibi çağırabileceği, 'use server' ile işaretlenmiş async fonksiyonlardır. İkisi de Next.js App Router gibi onları destekleyen bir paketleyicisi olan bir framework gerektirir, bu yüzden bu editörde çalışamazlar.

// A Server Component: async, runs on the server only
export default async function Notes() {
    const notes = await db.notes.findMany();
    return notes.map((note) => <Note key={note.id} note={note} />);
}

// A Server Function, usable as a form action
async function createNote(formData) {
    'use server';
    await db.notes.create({ text: formData.get('text') });
}

Kaldırılan ve değişen API'ler

React 19 yıllardır kullanımdan kaldırılmış olan API'leri kaldırdı:

Class bileşenleri defaultProps'u korur. Hatalar da farklı bildirilir: bir error boundary tarafından yakalanan hatalar bir kez console.error ile kaydedilir, yakalanmamış hatalar window.reportError'a gider ve createRoot onları kendin bildirmen için onCaughtError ve onUncaughtError seçeneklerini kabul eder.

React 19'a yükseltme

Önce React 18.3'e yükselt. 18.2 ile aynıdır ama kullanımdan kaldırılan API'ler ve React 19'un ihtiyaç duyduğu diğer değişiklikler hakkında uyarır, böylece uygulama hâlâ çalışırken onları düzeltebilirsin. React 19 ayrıca Vite ve tüm güncel framework'lerin zaten kullandığı modern JSX dönüşümünü gerektirir. Sonra React 19'u kur:

npm install react@^19 react-dom@^19
npm install --save-dev @types/react@^19 @types/react-dom@^19

Resmi yükseltme rehberi mekanik değişiklikler için codemod'lara yönlendirir. İlki string ref'leri, act import'larını ve ReactDOM.render'ı kapsar; ikincisi TypeScript kodunu yeni tipler için günceller:

npx codemod@latest react/19/migration-recipe
npx types-react-codemod@latest preset-19 ./src

Yükselttikten sonra hiçbir şey seni Actions'ı ya da yeni hook'ları benimsemeye zorlamaz. Mevcut bileşenler, hook'lar ve class bileşenleri çalışmaya devam eder; formları teker teker <form action>'a taşıyabilirsin.