React 18 đã được phát hành với nhiều tính năng mới thú vị. Trong bài viết này, chúng ta sẽ tìm hiểu về những cải tiến quan trọng nhất và cách áp dụng chúng vào dự án thực tế.

Concurrent Features

Concurrent Features là một trong những tính năng quan trọng nhất của React 18. Nó cho phép React “tạm dừng” việc render để ưu tiên các tác vụ quan trọng hơn, giúp ứng dụng mượt mà hơn.

import { startTransition } from 'react';

function handleClick() {
  startTransition(() => {
    setSearchQuery(input);
  });
}

Automatic Batching

React 18 tự động batch các state updates, giúp tối ưu hiệu suất mà không cần thay đổi code:

function handleClick() {
  setCount(c => c + 1); // Không re-render
  setFlag(f => !f);     // Không re-render
  // Chỉ re-render một lần
}

Suspense cho Server-Side Rendering

Suspense giờ đây hỗ trợ SSR, cho phép bạn stream HTML từ server:

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>

Cách migrate từ React 17

Để migrate lên React 18, bạn cần:

1. Cập nhật React và ReactDOM lên version 18
2. Thay đổi cách render root component
3. Kiểm tra và cập nhật các thư viện bên thứ 3

// React 18
import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

Kết luận

React 18 mang lại nhiều cải tiến quan trọng về hiệu suất và trải nghiệm người dùng. Việc nắm vững những tính năng mới này sẽ giúp bạn xây dựng ứng dụng tốt hơn và tận dụng tối đa sức mạnh của React.