React 19: tính năng mới, API bị loại bỏ và cách nâng cấp

React 19 là phiên bản lớn của React, phát hành vào tháng 12 năm 2024. Nó bổ sung Actions (các hàm async quản lý trạng thái chờ, lỗi và form), các hook useActionState, useOptimistic và use, ref như một prop thông thường, cùng các thẻ <title> và <meta> được React chuyển vào head của tài liệu. React 19.2 (tháng 10 năm 2025) thêm <Activity> và useEffectEvent.

Mọi ví dụ bên dưới đều chạy trên React 19.2. Đây là một Action: một hàm async được truyền cho form, với trạng thái chờ và lỗi trả về được useActionState xử lý.

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

Nhấn Save khi ô còn trống để xem lỗi, rồi gõ một cái tên và lưu: nút hiển thị "Saving..." trong 800 ms. Không có useState cho lỗi, không có cờ isLoading và không có e.preventDefault().

Actions và form action

Trong React 18, với mỗi form bạn đều viết cùng những bước: chặn submit mặc định, bật cờ loading, await request, lưu lỗi, tắt cờ. React 19 gọi một hàm làm việc async bên trong transition là một Action, và tự lo phần sổ sách đó cho bạn.

• startTransition (và useTransition) giờ nhận một hàm async. isPending giữ giá trị true cho đến khi cả hàm chạy xong.
• <form action={fn}> gọi fn với FormData của form khi form được submit. Nó chạy như một Action, và sau khi chạy xong React đặt lại các trường uncontrolled của form.
• <button formAction={fn}> cho một nút submit có action riêng.
• useActionState giữ giá trị mà action trả về gần nhất, nên một action có thể trả về thông báo lỗi hoặc bản ghi đã lưu.
• useFormStatus từ react-dom cho phép một component bên trong form biết form đó có đang submit hay không, mà không cần truyền props xuống. Nó cần một <form> cha, nên ở đây nó xuất hiện trong một khối code tĩnh:

import { useFormStatus } from 'react-dom';

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

useOptimistic

useOptimistic hiển thị kết quả bạn mong đợi trong lúc Action vẫn đang chạy, và quay về state thật khi Action kết thúc. Một bộ đếm lượt thích có thể tăng ngay khi bạn nhấn, rồi giảm lại nếu request thất bại.

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

Trang useOptimistic có một ví dụ chạy được với API giả cố tình thất bại, để bạn xem quá trình hoàn tác.

API use

use đọc giá trị từ một promise hoặc từ một context. Với promise, nó suspend component cho đến khi promise resolve, và trong lúc đó <Suspense> gần nhất hiển thị fallback. Khác với mọi hook khác, use có thể được gọi bên trong if hay vòng lặp, và sau một lệnh return sớm.

React 19 cũng cho phép bạn render trực tiếp <ThemeContext value="dark"> thay vì <ThemeContext.Provider>. Cả hai đều xuất hiện trong ví dụ này:

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 như một prop, và cleanup cho ref

Function component giờ nhận ref như mọi prop khác. Bạn không còn cần bọc nó trong forwardRef để chuyển một ref xuống DOM element.

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 giờ cũng có thể trả về một hàm cleanup. React gọi hàm đó khi element rời khỏi màn hình, giống cách cleanup của effect hoạt động. Một callback không trả về gì vẫn được gọi với null khi bị gỡ bỏ, như trong 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>
    );
}

Nhấn nút vài lần và đọc console: mỗi lần gỡ bỏ ghi dòng cleanup, mỗi lần quay lại ghi attached to DIV.

Metadata cho tài liệu

Bạn có thể render <title>, <meta> và <link> ở bất kỳ đâu trong component, và React chuyển chúng vào <head>. Một component trang có thể tự đặt tiêu đề mà không cần thư viện như 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>
    );
}

Bản xem trước không có tab trình duyệt để hiển thị, nên effect ghi log document.title thay vào đó. Chuyển bài viết và tiêu đề được log thay đổi theo.

Stylesheet cũng được xử lý tương tự: <link rel="stylesheet" href="..." precedence="default" /> bên trong một component được chèn vào head đúng một lần, theo thứ tự precedence, và React chờ nó tải xong rồi mới hiển thị nội dung cần đến nó. Một <script async src="..."> được nhiều component render chỉ tải một lần. react-dom cũng export preload, preinit, preconnect và prefetchDNS để gợi ý tải tài nguyên.

Activity và useEffectEvent (React 19.2)

<Activity mode="hidden"> ẩn các phần tử con mà không vứt bỏ state của chúng. React ẩn DOM, chạy cleanup của các effect và khôi phục mọi thứ khi mode trở lại "visible". Nó hợp với các tab và panel mà bạn đoán người dùng sẽ quay lại.

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

Gõ một ghi chú, chuyển sang About rồi quay lại. Chữ vẫn còn đó, và console cho thấy effect đã được cleanup trong lúc bị ẩn. Thay wrapper <Activity> bằng {tab === 'notes' && <Notes />}, ghi chú sẽ mất mỗi lần chuyển tab.

useEffectEvent đưa một hàm ra khỏi danh sách dependency của effect. Hàm đó luôn thấy props và state mới nhất, nhưng việc chúng thay đổi không khiến effect chạy lại:

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 cũng thêm cacheSignal cho Server Components (nó cho bạn biết khi nào kết quả của cache() không còn cần nữa) và Performance Tracks trong panel performance của Chrome DevTools. React 19.1 thêm captureOwnerStack, một hàm chỉ có trong môi trường development, trả về những component đã render component hiện tại.

Server Components và Server Functions

Server Components là những component chạy trước trên máy chủ (hoặc lúc build) và gửi kết quả đến trình duyệt. Chúng có thể là async và đọc trực tiếp cơ sở dữ liệu, và code của chúng không bao giờ được gửi xuống client. Server Functions (ban đầu gọi là Server Actions) là các hàm async được đánh dấu bằng 'use server' mà một client component có thể gọi như một hàm bình thường. Cả hai đều cần một framework có bundler hỗ trợ chúng, chẳng hạn Next.js App Router, nên chúng không chạy được trong trình soạn thảo này.

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

Các API bị loại bỏ và thay đổi

React 19 loại bỏ những API đã bị deprecate từ nhiều năm:

Class component vẫn giữ defaultProps. Lỗi cũng được báo theo cách khác: lỗi bị error boundary bắt được ghi bằng console.error một lần, lỗi không được bắt đi đến window.reportError, và createRoot nhận các tùy chọn onCaughtError và onUncaughtError để bạn tự báo lỗi.

Nâng cấp lên React 19

Hãy nâng cấp lên React 18.3 trước. Phiên bản này giống hệt 18.2 nhưng cảnh báo về các API đã bị deprecate và những thay đổi khác mà React 19 cần, để bạn sửa chúng trong lúc ứng dụng vẫn chạy. React 19 cũng yêu cầu JSX transform hiện đại, thứ mà Vite và mọi framework hiện nay đều đã dùng. Sau đó cài React 19:

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

Hướng dẫn nâng cấp chính thức chỉ đến các codemod cho những thay đổi máy móc. Codemod đầu tiên xử lý string ref, lệnh import act và ReactDOM.render; codemod thứ hai cập nhật code TypeScript theo các kiểu mới:

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

Sau khi nâng cấp, không có gì buộc bạn phải dùng Actions hay các hook mới. Các component, hook và class component hiện có vẫn tiếp tục chạy; bạn có thể chuyển từng form sang <form action> một.