HOC và Custom Hooks: Khi nào dùng, dùng thế nào để React hiệu quả?

Chào các bạn, là tôi đây! Trong thế giới React năng động, việc tái sử dụng logic và quản lý trạng thái là chìa khóa để xây dựng các ứng dụng mạnh mẽ và dễ bảo trì. Hai "người hùng" thường được nhắc đến trong bối cảnh này là Higher-Order Components (HOC) và Custom Hooks. Vậy, giữa HOC và Custom Hooks, đâu là lựa chọn tối ưu cho dự án của bạn? Chúng ta hãy cùng tìm hiểu sâu hơn nhé!

Higher-Order Components (HOC) – Người tiền nhiệm quen thuộc

HOC không phải là một tính năng của React mà là một mẫu thiết kế (design pattern) mạnh mẽ được sinh ra từ bản chất cấu tạo của React. Về cơ bản, HOC là một hàm nhận vào một component và trả về một component mới đã được "nâng cấp" với các props hoặc logic bổ sung.

HOC hoạt động như thế nào?

Hãy tưởng tượng bạn có một component cần lấy dữ liệu từ API. Thay vì viết logic fetch data lặp đi lặp lại ở nhiều component, bạn có thể tạo một HOC:

function withDataFetching(WrappedComponent, url) {  return class extends React.Component {    constructor(props) {      super(props);      this.state = { data: [], loading: true };    }    componentDidMount() {      fetch(url)        .then(res => res.json())        .then(data => this.setState({ data, loading: false }));    }    render() {      return (        <WrappedComponent          data={this.state.data}          loading={this.state.loading}          {...this.props}        />      );    }  };}/* Sử dụng HOC */const MyComponent = ({ data, loading }) => (  <div>    {loading ? <p>Loading...</p> : <ul>{data.map(item => <li key={item.id}>{item.name}</li>)}</ul>}  </div>);const EnhancedMyComponent = withDataFetching(MyComponent, '/api/items');

Ưu điểm của HOC:

• Tái sử dụng logic: Dễ dàng chia sẻ logic giữa nhiều component mà không cần lặp lại code.
• Tách biệt mối quan tâm: Tách biệt logic xử lý dữ liệu hoặc hành vi khỏi UI, giúp component "thuần" hơn.
• Khả năng cấu thành: Có thể kết hợp nhiều HOC với nhau để tạo ra các component phức tạp hơn.

Nhược điểm của HOC:

• "Wrapper Hell" (Địa ngục của các lớp bọc): Khi sử dụng nhiều HOC, cấu trúc component tree có thể trở nên phức tạp, khó đọc và debug.
• Xung đột tên props: Các HOC khác nhau có thể vô tình ghi đè lên các props cùng tên, dẫn đến hành vi không mong muốn.
• Khó khăn khi debug: Khó khăn trong việc theo dõi luồng dữ liệu khi có nhiều lớp HOC lồng nhau.
• Không tương thích tốt với Hooks: HOC được thiết kế cho class components, việc kết hợp với functional components và Hooks có thể hơi cồng kềnh.

Custom Hooks – Làn gió mới từ React 16.8

Với sự ra đời của React Hooks ở phiên bản 16.8, Custom Hooks đã nhanh chóng trở thành phương pháp ưa thích để tái sử dụng logic có trạng thái. Custom Hooks là các hàm JavaScript thông thường có tên bắt đầu bằng "use" và có thể gọi các React Hooks khác (như useState, useEffect, useContext) bên trong.

Custom Hooks hoạt động như thế nào?

Hãy viết lại ví dụ fetch data trên bằng Custom Hook:

import { useState, useEffect } from 'react';function useDataFetching(url) {  const [data, setData] = useState([]);  const [loading, setLoading] = useState(true);  useEffect(() => {    fetch(url)      .then(res => res.json())      .then(json => {        setData(json);        setLoading(false);      });  }, [url]); // Dependency array: chạy lại khi url thay đổi  return { data, loading };}/* Sử dụng Custom Hook */const MyComponent = () => {  const { data, loading } = useDataFetching('/api/items'); // Gọi hook trực tiếp trong functional component  return (    <div>      {loading ? <p>Loading...</p> : <ul>{data.map(item => <li key={item.id}>{item.name}</li>)}</ul>}    </div>  );};

Ưu điểm của Custom Hooks:

• API đơn giản, trực quan: Dễ hiểu và sử dụng, giống như gọi một hàm JavaScript thông thường.
• Tránh "Wrapper Hell": Không tạo ra các lớp component lồng nhau, giữ cho component tree sạch sẽ.
• Tương thích hoàn hảo với functional components: Được thiết kế để hoạt động liền mạch với các component hàm và Hooks khác.
• Dễ dàng chia sẻ trạng thái và logic: Tập trung vào logic thay vì cấu trúc component.
• Dễ đọc và debug hơn: Luồng dữ liệu rõ ràng hơn nhiều.

Nhược điểm của Custom Hooks:

• Quy tắc Hooks: Phải tuân thủ các quy tắc của Hooks (chỉ gọi ở cấp cao nhất của component hàm hoặc từ Custom Hook khác), có thể gây nhầm lẫn ban đầu.
• Có thể bị lạm dụng: Đối với logic quá đơn giản, việc tạo Custom Hook có thể không cần thiết.

HOC vs Custom Hooks: Khi nào dùng loại nào?

Thực tế, Custom Hooks thường là lựa chọn ưu tiên hơn trong hầu hết các trường hợp mới, đặc biệt với các dự án sử dụng functional components và React 16.8+.

• Sử dụng Custom Hooks khi:
  • Bạn cần chia sẻ logic có trạng thái giữa các functional component.
  • Bạn muốn tránh "Wrapper Hell" và giữ cho component tree phẳng.
  • Bạn đang làm việc với các component hàm.
• Sử dụng HOC khi:
  • Bạn đang làm việc với một codebase cũ sử dụng nhiều class components.
  • Bạn cần một cách để "tiêm" props hoặc sửa đổi hành vi của component mà không cần truy cập vào trạng thái bên trong của nó (ví dụ: authentication HOC).
  • Bạn muốn tận dụng các thư viện bên thứ ba vẫn còn dùng HOC.

Tóm lại, Custom Hooks đã giải quyết nhiều vấn đề mà HOC gặp phải, mang lại trải nghiệm phát triển mượt mà và hiệu quả hơn.

Micro-frontends với React: Chiến lược cho ứng dụng lớn

Khi ứng dụng của bạn phát triển lớn mạnh, một team developer duy nhất có thể gặp khó khăn trong việc quản lý codebase khổng lồ. Micro-frontends là một kiến trúc giúp chia nhỏ một ứng dụng frontend monolith thành nhiều ứng dụng nhỏ hơn, độc lập, có thể được phát triển, triển khai và quản lý bởi các team khác nhau.

Tại sao cần Micro-frontends?

• Tăng tính độc lập của team: Mỗi team có thể làm việc trên một "micro-app" mà không ảnh hưởng đến các team khác.
• Triển khai độc lập: Các micro-app có thể được triển khai riêng lẻ, giảm rủi ro và tăng tốc độ phát hành.
• Linh hoạt công nghệ: Mặc dù bạn đang dùng React, nhưng nếu muốn, một micro-app có thể được viết bằng Vue hoặc Angular (ít phổ biến trong một hệ sinh thái React).
• Dễ quản lý codebase: Mỗi micro-app có codebase nhỏ hơn, dễ hiểu và bảo trì hơn.

Thách thức khi triển khai Micro-frontends với React:

• Quản lý chia sẻ tài nguyên (Shared Dependencies): Làm thế nào để các micro-app chia sẻ cùng một phiên bản React, Redux, Material-UI... để tránh tải trùng lặp và xung đột phiên bản?
• Giao tiếp giữa các Micro-frontends: Làm thế nào để các micro-app truyền dữ liệu hoặc kích hoạt hành động cho nhau?
• Routing và Navigation: Làm thế nào để điều hướng liền mạch giữa các micro-app khác nhau?
• Đồng bộ hóa UI/UX: Đảm bảo trải nghiệm người dùng nhất quán trên toàn bộ ứng dụng.
• Phức tạp trong triển khai: Cần một chiến lược triển khai mạnh mẽ (ví dụ: orchestration layer).

Các chiến lược triển khai Micro-frontends với React:

Có nhiều cách để tích hợp các micro-app React:

• Iframes: Đơn giản nhất, cung cấp sự cô lập mạnh mẽ, nhưng có nhược điểm về UX (thanh cuộn riêng, giao tiếp phức tạp). Không được khuyến khích cho ứng dụng hiện đại.
• Web Components: Sử dụng các tiêu chuẩn trình duyệt để đóng gói các micro-app thành các phần tử HTML tùy chỉnh. Cho phép cô lập tốt và khả năng tương tác.
• Module Federation (Webpack 5): Đây là một giải pháp hiện đại và mạnh mẽ. Nó cho phép các ứng dụng chia sẻ code và dependencies tại runtime. Một ứng dụng có thể "xuất" các module và một ứng dụng khác có thể "nhập" chúng, tạo ra một kiến trúc linh hoạt, hiệu quả. Đây thường là lựa chọn hàng đầu cho React micro-frontends hiện nay.
• Tích hợp ở Build-time/Deploy-time:
  • Monorepo với Shared Component Libraries: Không hẳn là micro-frontends đúng nghĩa, nhưng giúp quản lý code base lớn bằng cách chia sẻ components và utilities.
  • Server-Side Includes (SSI)/Edge Side Includes (ESI): Tích hợp các phần của trang web ở phía server hoặc CDN.

Chọn chiến lược phụ thuộc vào quy mô dự án, yêu cầu về cô lập, và khả năng quản lý độ phức tạp.

Kết luận

Dù là HOC hay Custom Hooks, cả hai đều là công cụ đắc lực giúp chúng ta xây dựng ứng dụng React hiệu quả hơn. Tuy nhiên, Custom Hooks với sự linh hoạt và khả năng tương thích tốt hơn với functional components đã trở thành lựa chọn ưu tiên trong phát triển mới. Còn về Micro-frontends, đây là một chiến lược mạnh mẽ để giải quyết thách thức của các ứng dụng quy mô lớn, giúp các team làm việc độc lập và triển khai nhanh chóng hơn. Hy vọng bài viết này đã cung cấp cho bạn cái nhìn rõ ràng hơn về các khái niệm này và giúp bạn đưa ra quyết định đúng đắn cho dự án của mình!

Chúc các bạn code vui vẻ!