Các tính năng đáng chú ý của React 19 Beta

🧩 Kiến thức cần có

1. Kiến thức về ReactJS.

2. Kiến thức về HTML, Javascript.

3. Kinh nghiệm làm việc cơ bản với các dự án web xây dựng bằng ReactJS.

1️⃣ Giới thiệu React 19

2️⃣ Các tính năng mới

• React Compiler: React đang triển khai một trình biên dịch mới, hứa hẹn sẽ cải thiện hiệu năng web một cách đáng kể. Tại thời điểm mình viết bài thì Instagram đã được tận dụng công nghệ này trên trang web của họ và chắc chắn sẽ đến lượt của chúng ta khi phiên bản ổn định được công bố.

• Actions: Đơn giản hóa việc xử lý dữ liệu và tương tác trong các trang web.

• Server Components: Các component được render từ phía server, giúp cải thiện tốc độ tải trang và cũng hỗ trợ cho việc SEO tốt hơn. Hiện tại chúng ta đã có thể trải nghiệm tính năng này thông qua NextJS.

• Asset Loading: Assets được load dưới background, giúp cho việc chuyển tiếp trang trở nên mượt mà hơn.

• Document Metadata: Bổ sung <DocumentHead> component, chúng ta có thể thiết lập thẻ <title> và các thẻ <meta> bên trong, cho thấy kể từ React 19 trở đi, chúng ta không cần trăn trở về việc SEO nữa 😎.

• Web Components: Cung cấp khả năng tương thích cao hơn với Web Components,.

• Enhanced Hooks: Lược bỏ cũng như cải tiến một số hooks, giúp code của chúng ta dễ đọc hơn, đồng thời mang lại trải nghiệm tốt hơn khi lập trình 🥳.

3️⃣ React Compiler

4️⃣ Server Components & Server Actions

🥇Server Components

🥈Server Actions

5️⃣ Web Components

6️⃣ Asset Loading

7️⃣ Document Metadata

import React, { useEffect } from 'react';

const HeadDocument = ({ title }) => {
  useEffect(() => {
    document.title = title;

	 	const metaDescriptionTag = document.querySelector('meta[name="description"]');
    if (metaDescriptionTag) {
	    metaDescriptionTag.setAttribute('content', 'New description');
    }
  }, [title]);

  return null;
};

export default HeadDocument;

const HomePage = () => {
  return (
    <>
      <title>tiendnm</title>
      <meta name="description" content="New description" />
      // Page content
    </>
  );
}

8️⃣ Cải tiến React Hooks

import { use } from "react";

const fetchUsers = async () => {
    const res = await fetch('https://example.com/api/v1/users');
    return res.json();
};
  
const UsersItems = () => {
  const users = use(fetchUsers());
  
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id} className='bg-blue-50 shadow-md p-4 my-6 rounded-lg'>
          <h2 className='text-xl font-bold'>{user.name}</h2>
          <p>{user.email}</p>
        </li>
      ))}
    </ul>
  );
}; 
export default UsersItems

useContext(someContext);

use(someContext);

9️⃣ Trải nghiệm ngay React 19 Beta

☀️ Tổng kết