React 19 cho render `<title>`, `<meta>`, `<link>` ngay trong component. Nó hoạt động ra sao và có thay được `react-helmet` không?

Từ React 19, khi component render một thẻ <title>, <meta> hoặc <link>, React tự động nhấc thẻ đó lên <head> của tài liệu, kể cả khi component nằm sâu trong cây.

jsx

function ArticlePage({ post }) {
  return (
    <article>
      <title>{post.title}</title>
      <meta name="description" content={post.excerpt} />
      <link rel="canonical" href={post.url} />
      <h1>{post.title}</h1>
    </article>
  )
}

Điểm cần biết:
- Hoạt động cả khi render phía server (thẻ nằm sẵn trong HTML trả về, crawler đọc được) lẫn client.
- Component unmount thì React gỡ thẻ đó khỏi <head>.
- Nếu hai nhánh cùng render <title>, thẻ render sau ghi đè — React không hợp nhất theo kiểu ưu tiên như Helmet.

Với ứng dụng React thuần, nó thay được react-helmet cho phần lớn nhu cầu. Với Next.js App Router thì vẫn nên dùng export const metadata / generateMetadata vì Next quản lý metadata ở tầng route (dedupe, template, Open Graph image).

Xem toàn bộ React cùng filter theo level & chủ đề con.

Mở danh sách React

jsx

function ArticlePage({ post }) {
  return (
    <article>
      <title>{post.title}</title>
      <meta name="description" content={post.excerpt} />
      <link rel="canonical" href={post.url} />
      <h1>{post.title}</h1>
    </article>
  )
}