Tối ưu hiệu suất ứng dụng React với Hooks

React là một thư viện mạnh mẽ, nhưng nếu không cẩn thận, ứng dụng của bạn có thể trở nên chậm chạp do quá trình re-render liên tục. Trong bài viết này, chúng ta sẽ khám phá các kỹ thuật tối ưu hóa hiệu suất nâng cao.

1. Hiểu về Re-render trong React

React sẽ re-render một component khi:

• State của nó thay đổi.
• Props từ component cha truyền xuống thay đổi.
• Component cha re-render.

2. Sử dụng useMemo để ghi nhớ các phép tính nặng

Nếu bạn có một hàm xử lý dữ liệu lớn, việc chạy lại nó mỗi khi component cha re-render là lãng phí.

const filteredData = useMemo(() => {
  return largeDataset.filter(item => item.isActive);
}, [largeDataset]);

3. Tránh tạo function mới với useCallback

Mỗi khi component re-render, các function định nghĩa bên trong nó sẽ được tạo mới. Nếu function này được truyền xuống component con đã được bọc bởi React.memo, nó sẽ khiến component con đó re-render lại.

const handleTabSelection = useCallback((id) => {
  setActiveTab(id);
}, []); // Dependency array trống nghĩa là function chỉ được tạo một lần duy nhất

4. React.memo: Khi nào nên dùng?

React.memo giúp ghi nhớ kết quả render của một functional component. Nó chỉ re-render nếu props thay đổi.

const UserProfile = React.memo(({ user }) => {
  console.log("UserProfile rendering...");
  return (
    <div>{user.name}</div>
  );
});

Kết luận

Tối ưu hóa không phải là việc áp dụng mọi thứ ở khắp mọi nơi. Hãy sử dụng các công cụ như React DevTools Profiler để tìm ra nút thắt cổ chai trước khi bắt đầu tối ưu hóa.

---

Chúc các bạn xây dựng được những ứng dụng React mượt mà nhất!