React 19: Fitur Baru, API yang Dihapus, dan Cara Upgrade

React 19 adalah versi mayor React yang dirilis pada Desember 2024. Versi ini menambahkan Actions (fungsi async yang mengelola keadaan pending, error, dan form), hook useActionState, useOptimistic, dan use, ref sebagai prop biasa, serta tag <title> dan <meta> yang dipindahkan React ke head dokumen. React 19.2 (Oktober 2025) menambahkan <Activity> dan useEffectEvent.

Setiap contoh di bawah berjalan di React 19.2. Berikut sebuah Action: fungsi async yang dikirim ke form, dengan keadaan pending dan error yang dikembalikan ditangani oleh useActionState.

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>
    );
}

Tekan Save dengan field kosong untuk melihat error-nya, lalu ketik sebuah nama dan simpan: tombolnya bertuliskan "Saving..." selama 800 ms. Tidak ada useState untuk error, tidak ada flag isLoading, dan tidak ada e.preventDefault().

Actions dan form action

Di React 18, kamu menulis langkah-langkah yang sama untuk setiap form: mencegah submit default, mengatur flag loading, menunggu request dengan await, menyimpan error, lalu menghapus flag. React 19 menyebut fungsi yang melakukan pekerjaan async di dalam transition sebagai Action, dan mengurus pencatatan itu untukmu.

• startTransition (dan useTransition) sekarang menerima fungsi async. isPending tetap true sampai seluruh fungsi selesai.
• <form action={fn}> memanggil fn dengan FormData milik form saat form dikirim. Fungsi itu berjalan sebagai Action, dan setelah selesai, React mengatur ulang field form yang tidak terkontrol.
• <button formAction={fn}> memberi satu tombol submit action-nya sendiri.
• useActionState menyimpan nilai yang terakhir dikembalikan action, jadi sebuah action bisa mengembalikan pesan error atau data yang disimpan.
• useFormStatus dari react-dom memungkinkan komponen di dalam form membaca apakah form itu sedang dikirim, tanpa mengirim props ke bawah. Hook ini butuh <form> sebagai induk, jadi di sini ia muncul di blok statis:

import { useFormStatus } from 'react-dom';

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

useOptimistic

useOptimistic menampilkan hasil yang kamu harapkan selama sebuah Action masih berjalan, lalu kembali ke state yang sebenarnya saat Action selesai. Penghitung like bisa langsung naik saat kamu mengklik, lalu turun lagi jika request-nya gagal.

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

Halaman useOptimistic punya contoh yang bisa dijalankan dengan API palsu yang sengaja gagal, jadi kamu bisa melihat rollback-nya.

API use

use membaca nilai dari promise atau dari context. Dengan promise, ia membuat komponen suspend sampai promise selesai, dan <Suspense> terdekat menampilkan fallback-nya selama menunggu. Berbeda dengan hook lain, use bisa dipanggil di dalam if atau loop, dan setelah early return.

React 19 juga memungkinkanmu merender <ThemeContext value="dark"> secara langsung, bukan <ThemeContext.Provider>. Keduanya muncul di contoh ini:

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>
    );
}

ref sebagai prop, dan cleanup ref

Function component sekarang menerima ref seperti prop lain. Kamu tidak perlu lagi membungkusnya dengan forwardRef untuk meneruskan ref ke elemen DOM.

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>
    );
}

Ref callback juga bisa mengembalikan fungsi cleanup. React memanggilnya saat elemen meninggalkan layar, sama seperti cleanup milik effect. Callback yang tidak mengembalikan apa pun tetap dipanggil dengan null saat elemennya dihapus, seperti di React 18.

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>
    );
}

Klik tombolnya beberapa kali lalu baca konsol: setiap penghapusan mencatat baris cleanup, setiap kemunculan kembali mencatat attached to DIV.

Metadata dokumen

Kamu bisa merender <title>, <meta>, dan <link> di mana saja di dalam komponen, dan React memindahkannya ke <head>. Komponen halaman bisa mengatur judulnya sendiri tanpa library seperti react-helmet.

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>
    );
}

Pratinjau tidak punya tab browser untuk ditampilkan, jadi effect-nya mencatat document.title sebagai gantinya. Ganti artikel, dan judul yang tercatat ikut berubah.

Stylesheet mendapat perlakuan yang sama: <link rel="stylesheet" href="..." precedence="default" /> di dalam komponen dimasukkan ke head sekali saja, sesuai urutan precedence, dan React menunggunya sebelum menampilkan konten yang membutuhkannya. <script async src="..."> yang dirender oleh beberapa komponen hanya dimuat sekali. react-dom juga mengekspor preload, preinit, preconnect, dan prefetchDNS untuk resource hint.

Activity dan useEffectEvent (React 19.2)

<Activity mode="hidden"> menyembunyikan anak-anaknya tanpa membuang state-nya. React menyembunyikan DOM-nya, menjalankan cleanup dari effect-nya, lalu memulihkan semuanya saat mode-nya kembali menjadi "visible". Cocok untuk tab dan panel yang kamu perkirakan akan dikunjungi lagi oleh pengguna.

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>
    );
}

Ketik sebuah catatan, pindah ke About, lalu kembali. Teksnya masih ada, dan konsol menunjukkan effect-nya sudah dibersihkan selama disembunyikan. Ganti wrapper <Activity> dengan {tab === 'notes' && <Notes />}, dan catatannya hilang setiap kali berpindah.

useEffectEvent mengeluarkan sebuah fungsi dari dependensi effect. Fungsi itu selalu melihat props dan state terbaru, tetapi perubahannya tidak memulai ulang effect:

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 juga menambahkan cacheSignal untuk Server Components (memberi tahu kapan hasil cache() tidak lagi dibutuhkan) dan Performance Tracks di panel performance Chrome DevTools. React 19.1 menambahkan captureOwnerStack, fungsi khusus development yang mengembalikan komponen mana saja yang merender komponen saat ini.

Server Components dan Server Functions

Server Components adalah komponen yang berjalan lebih dulu di server (atau saat build) dan mengirim output-nya ke browser. Komponen ini bisa async dan langsung membaca database, dan kodenya tidak pernah dikirim ke client. Server Functions (awalnya disebut Server Actions) adalah fungsi async yang ditandai dengan 'use server' dan bisa dipanggil client component seperti fungsi biasa. Keduanya butuh framework dengan bundler yang mendukungnya, seperti Next.js App Router, jadi tidak bisa dijalankan di editor ini.

// 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') });
}

API yang dihapus dan diubah

React 19 menghapus API yang sudah deprecated selama bertahun-tahun:

Class component tetap memiliki defaultProps. Error juga dilaporkan dengan cara berbeda: error yang ditangkap error boundary dicatat sekali dengan console.error, error yang tidak tertangkap dikirim ke window.reportError, dan createRoot menerima opsi onCaughtError dan onUncaughtError untuk melaporkannya sendiri.

Upgrade ke React 19

Upgrade ke React 18.3 dulu. Versi ini identik dengan 18.2, tetapi memberi peringatan tentang API yang deprecated dan perubahan lain yang dibutuhkan React 19, jadi kamu bisa memperbaikinya selagi aplikasi masih berjalan. React 19 juga mewajibkan JSX transform modern, yang sudah dipakai Vite dan setiap framework saat ini. Lalu install React 19:

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

Panduan upgrade resmi menyarankan codemod untuk perubahan yang mekanis. Codemod pertama menangani string ref, import act, dan ReactDOM.render; yang kedua memperbarui kode TypeScript untuk tipe-tipe baru:

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

Setelah upgrade, tidak ada yang memaksamu memakai Actions atau hook baru. Komponen, hook, dan class component yang sudah ada tetap berjalan; kamu bisa memindahkan form ke <form action> satu per satu.