React Compiler là một công cụ mạnh mẽ mới được phát triển bởi nhóm React nhằm giảm thiểu việc re-rendering không cần thiết mà không cần sử dụng các kỹ thuật như useMemo, useCallback hay React.memo. Trong bài viết này, chúng ta sẽ cùng tìm hiểu và thử nghiệm React Compiler để thấy rõ hiệu quả của nó.
Tại Sao React Compiler Quan Trọng?
React Compiler xuất hiện với mục tiêu giải quyết một trong những vấn đề phức tạp nhất của React: tối ưu hóa hiệu suất. Trước đây, để ngăn việc re-rendering không cần thiết, chúng ta phải sử dụng useMemo, useCallback hay React.memo. Những kỹ thuật này tuy hiệu quả nhưng phức tạp và dễ gây nhầm lẫn. React Compiler giúp đơn giản hóa quá trình này, giảm thiểu sự phụ thuộc vào các kỹ thuật tối ưu hóa thủ công.
Bắt Đầu Với React Compiler
Để bắt đầu, chúng ta sẽ tạo một dự án mới bằng Vite. Bạn cũng có thể sử dụng Next.js, Webpack hay React Native. Tại thời điểm viết bài, khi tạo dự án React với Vite, các phiên bản react và react-dom được cài đặt là 18.2.0. Để sử dụng React Compiler, chúng ta cần nâng cấp lên React 19 R.C.
Cài Đặt và Cấu Hình
Đầu tiên, chúng ta sẽ sử dụng Vite để khởi tạo một dự án React.js.
Kể từ ngày 18 tháng 5 năm 2024, khi chúng ta khởi tạo một dự án React.js bằng Vite thì phiên bản sẽ là 18.2.0 dành cho react và react-dom. Trình biên dịch của React yêu cầu React 19 R.C, vì vậy chúng ta cần phải cập nhật version.
React Compiler sẽ được cài đặt dưới dạng plugin cho Babel.
Chúng ta cần phải chỉnh sửa cho phần plugin trong Vite config.
Vậy là phần cài đặt cũng như tích hợp React Complier cho dự án đã xong. Tiếp theo, chúng ta sẽ tạo ra một ví dụ nhỏ để kiểm tra xem React complier hoạt động như thế nào và có đáp ứng đúng mong chờ của chúng ta hay không.
Chúng ta sẽ tạo một component User và import component này trong component App.
Như trên ảnh, ta thấy dòng “User component re-rendered” xuất hiện hai lần, điều này là do cơ chế Strict Mode của React. Khi nhấn vào nút “count is 0”, React sẽ tiến hành cập nhật state “count”, khiến component App re-render. Khi một component cha re-render, các component con cũng sẽ re-render theo, dù props có thay đổi hay không.
Để tránh việc re-render không cần thiết, chúng ta thường sử dụng “memo” nhằm tối ưu hóa hiệu suất và hạn chế tình trạng này.
Một lưu ý quan trọng khi sử dụng “memo” để bọc component `User` là nếu component cha bị re-render thì component con có thể hạn chế được việc re-render. Tuy nhiên, component con vẫn sẽ bị re-render nếu như props `onClick` được khởi tạo lại. Điều này xảy ra vì khi component `App` bị re-render, function `onClick` sẽ được khởi tạo lại. Kết quả là, các component con nào nhận props `onClick` này cũng sẽ bị re-render lại, ngay cả khi đã sử dụng “memo”.
Để giải quyết tình trạng này một cách hiệu quả, chúng ta có thể sử dụng hook `useCallback` để bọc function `onClick` trong component App. Điều này sẽ giúp tối ưu hóa hiệu suất của ứng dụng bằng cách tránh tạo ra các hàm mới không cần thiết trong mỗi lần render. Bằng cách sử dụng `useCallback`, chúng ta đảm bảo rằng function `onClick` chỉ được tạo lại khi các dependencies (trong trường hợp này là một mảng rỗng) thay đổi, giúp cải thiện hiệu suất và tránh render lại không cần thiết.
Để giải quyết những vấn đề nêu trên, chúng ta cần đến hai công cụ chính là “memo” và “useCallback”. Khi tình huống trở nên phức tạp hơn, việc áp dụng thêm “useMemo” sẽ giúp tối ưu hóa hiệu quả. Tuy nhiên, việc lạm dụng quá nhiều hook có thể làm cho quá trình phát triển ứng dụng trở nên phức tạp và rối rắm. Hơn nữa, nếu không quản lý tốt các dependencies truyền vào “useCallback” và “useMemo”, chúng ta sẽ không thể tận dụng hết tiềm năng của các hook này. Do đó, sự cẩn trọng và kỹ năng quản lý dependencies là rất quan trọng để đảm bảo hiệu quả trong việc sử dụng các hook này.
React compiler giúp chúng ta không cần phải dùng đến các hook như “useCallback”, “useMemo” hay “memo” để tối ưu hóa việc re-render nữa. Như trong hình, mặc dù state “count” được cập nhật đến giá trị 3 nhưng component User vẫn không bị re-render.
KẾT LUẬN
React Compiler là một công cụ tiềm năng giúp đơn giản hóa việc tối ưu hóa hiệu suất trong React. Nó giúp chúng ta viết mã React dễ dàng hơn, giảm bớt sự phức tạp và nhầm lẫn liên quan đến các kỹ thuật tối ưu hóa thủ công. Mặc dù hiện tại React Compiler chưa phải là phiên bản ổn định, nhưng nó hứa hẹn sẽ trở thành một phần quan trọng trong tương lai của React.
Nếu bạn đang tìm kiếm cách tối ưu hóa hiệu suất React mà không muốn đối mặt với sự phức tạp, hãy thử nghiệm React Compiler ngay hôm nay và đón chờ phiên bản ổn định trong tương lai gần.
Tham khảo: