Higher-Order Components (HOC) trong React: Cách dùng và ứng dụng thực tế

Trong thế giới lập trình React, việc tối ưu và tái sử dụng code luôn là một ưu tiên hàng đầu. Giữa vô vàn các mẫu thiết kế (design pattern), Higher-Order Component (HOC) nổi lên như một kỹ thuật mạnh mẽ và kinh điển, giúp các lập trình viên trừu tượng hóa và chia sẻ logic giữa các component một cách hiệu quả.

Vậy HOC trong React là gì? Nó hoạt động ra sao và khi nào chúng ta nên sử dụng nó? Hãy cùng khám phá toàn diện về khái niệm này qua bài viết dưới đây nhé!

HOC là gì? Một Cái Nhìn Trực Quan

Hãy tưởng tượng bạn có một nhà máy sản xuất áo phông. Nhà máy này nhận vào một chiếc áo phông trơn (một component) và "trang trí" thêm cho nó những tính năng mới như in hình, thêm túi, hoặc thay đổi màu sắc. Sản phẩm cuối cùng vẫn là một chiếc áo phông, nhưng đã được nâng cấp với những đặc tính mới.

HOC (Higher-Order Component) trong React hoạt động theo một triết lý tương tự.

HOC là một hàm (function) nhận vào một Component và trả về một Component mới đã được "nâng cấp".

Nói một cách kỹ thuật hơn, HOC là một mẫu thiết kế nâng cao trong React, cho phép tái sử dụng logic của component. HOC không phải là một phần của API React, mà là một mẫu hình được hình thành từ bản chất lập trình hàm (functional programming) của React.

Cú pháp cơ bản của một HOC trông như sau:

const enhancedComponent = higherOrderComponent(WrappedComponent)

Trong đó:

• higherOrderComponent: Là hàm HOC của chúng ta.
• WrappedComponent: Là component gốc mà chúng ta muốn "bọc" hoặc "nâng cấp".
• enhancedComponent: Là component mới, chứa logic của HOC và render WrappedComponent bên trong.

"Bên trong" một HOC hoạt động như thế nào?

Để hiểu rõ hơn, chúng ta hãy cùng xây dựng một ví dụ kinh điển: tạo một HOC có tên là withLoading để hiển thị một thông báo "Loading..." trong khi component đang chờ dữ liệu.

Giả sử chúng ta có một component ProductList có nhiệm vụ fetch và hiển thị danh sách sản phẩm.

// ProductList.js
import React, { useState, useEffect } from 'react'

const ProductList = () => {
  const [products, setProducts] = useState([])
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    // Giả lập việc fetch data
    setTimeout(() => {
      setProducts(['Sản phẩm 1', 'Sản phẩm 2', 'Sản phẩm 3'])
      setIsLoading(false)
    }, 2000)
  }, [])

  if (isLoading) {
    return <div>Loading...</div>
  }

  return (
    <ul>
      {products.map((product) => (
        <li key={product}>{product}</li>
      ))}
    </ul>
  )
}

export default ProductList

Bây giờ, nếu chúng ta có một component khác, ví dụ như UserList, cũng cần logic hiển thị "Loading..." tương tự, việc lặp lại code isLoading là không tối ưu. Đây chính là lúc HOC tỏa sáng.

Chúng ta sẽ tạo ra HOC withLoading:

// withLoading.js
import React from 'react'

const withLoading = (WrappedComponent) => {
  // HOC trả về một class component hoặc functional component mới
  return class WithLoading extends React.Component {
    render() {
      // Nhận vào một prop `isLoading` và quyết định render gì
      const { isLoading, ...props } = this.props

      if (isLoading) {
        return <div>Đang tải dữ liệu, vui lòng chờ...</div>
      }

      // Nếu không loading, render component gốc với các props của nó
      return <WrappedComponent {...props} />
    }
  }
}

export default withLoading

Bây giờ, chúng ta có thể áp dụng HOC này cho bất kỳ component nào:

// ProductListWithLoading.js
import withLoading from './withLoading'
import ProductList from './ProductList' // Component gốc không cần logic loading nữa

const ProductListWithLoading = withLoading(ProductList)

export default ProductListWithLoading

Trong component cha, chúng ta chỉ cần truyền prop isLoading vào là xong:

// App.js
function App() {
  const [loading, setLoading] = useState(true);

  // ... logic fetch data và set loading...

  return <ProductListWithLoading isLoading={loading} products={...} />;
}

Như bạn thấy, HOC withLoading đã giúp chúng ta tách biệt hoàn toàn logic hiển thị trạng thái tải dữ liệu ra khỏi component, giúp code sạch sẽ, dễ bảo trì và tái sử dụng.

Các ứng dụng thực tế của HOC

HOC không chỉ dùng để hiển thị loading. Nó cực kỳ linh hoạt và có thể được sử dụng trong nhiều kịch bản khác nhau:

• Truyền props và điều khiển props (Props manipulation): Thêm hoặc sửa đổi props truyền vào component được bọc.
• Trừu tượng hóa và quản lý state: HOC có thể quản lý state và truyền nó xuống component con dưới dạng props. Ví dụ: HOC quản lý trạng thái đóng/mở của một modal.
• Xác thực và phân quyền: Bọc các route hoặc component bằng một HOC requireAuth để kiểm tra xem người dùng đã đăng nhập hay chưa. Nếu chưa, chuyển hướng họ đến trang đăng nhập.
• Kết nối với store (Redux): Hàm connect của react-redux chính là một ví dụ kinh điển nhất về HOC. Nó nhận vào component và "tiêm" state từ Redux store và các action creators vào props của component đó.
• Logging và theo dõi: Tạo một HOC để ghi lại các sự kiện lifecycle hoặc tương tác của người dùng trong một component.
• Cung cấp context: HOC có thể đọc giá trị từ React Context và truyền chúng như props tới các component không cần trực tiếp sử dụng Context.Consumer.

HOC vs. Hooks: Khi nào nên dùng cái nào?

Sự ra đời của React Hooks (đặc biệt là useState, useEffect, useContext) đã thay đổi cách chúng ta viết component và tái sử dụng logic. Hooks cung cấp một cách tiếp cận trực tiếp và đơn giản hơn HOC trong nhiều trường hợp.

Vậy, có phải Hooks đã làm cho HOC trở nên lỗi thời? Câu trả lời là không.

Higher-Order Components (HOC)

• Bản chất: Là một hàm bọc một component.
• Cách dùng: const EnhancedComponent = withHOC(MyComponent);
• Ưu điểm:
  • Hoạt động tốt với cả class component và functional component.
  • Rất mạnh mẽ trong việc trừu tượng hóa logic phức tạp và tái cấu trúc component.
• Nhược điểm:
  • Có thể tạo ra "wrapper hell".
  • Khó theo dõi nguồn gốc của props (props đến từ HOC nào?).
  • Cú pháp có phần dài dòng hơn Hooks.

React Hooks

• Bản chất: Là các hàm đặc biệt cho phép "kết nối" vào các tính năng của React.
• Cách dùng: const value = useCustomHook();
• Ưu điểm:
  • Cú pháp ngắn gọn, dễ đọc và dễ hiểu.
  • Tránh được "wrapper hell" khi nhiều HOC lồng vào nhau.
  • Logic được đặt ngay bên trong component, dễ theo dõi hơn.
• Nhược điểm:
  • Chỉ hoạt động trong functional components.
  • Cần tuân thủ các quy tắc của Hooks (chỉ gọi ở top-level, không gọi trong vòng lặp/điều kiện).

Khi nào nên chọn HOC?

• Khi bạn cần tái sử dụng cùng một logic cho nhiều class component.
• Khi bạn muốn thay đổi cách render của một component từ bên ngoài một cách triệt để (ví dụ: thêm các element bao bọc, thay đổi hoàn toàn cấu trúc DOM).
• Khi làm việc với các thư viện cũ hoặc codebase lớn vẫn đang sử dụng rộng rãi HOC (như react-redux phiên bản cũ).

Khi nào nên chọn Hooks?

• Trong hầu hết các trường hợp phát triển ứng dụng React hiện đại với functional components.
• Khi bạn muốn chia sẻ logic có state (stateful logic) một cách đơn giản và trực tiếp.
• Để tránh sự phức tạp của việc lồng nhiều HOC.

Thực tế, HOC và Hooks có thể cùng tồn tại và bổ trợ cho nhau một cách hoàn hảo trong cùng một dự án.

Kết luận: HOC vẫn chưa hề lỗi thời

Higher-Order Component (HOC) là một mẫu thiết kế mạnh mẽ và là một phần quan trọng trong lịch sử phát triển của React. Mặc dù sự phổ biến của React Hooks đã mang đến những giải pháp thay thế đơn giản hơn cho nhiều bài toán, HOC vẫn giữ một vị trí vững chắc trong việc giải quyết các vấn đề về tái sử dụng logic một cách có cấu trúc, đặc biệt trong các kịch bản phức tạp hoặc khi làm việc với class components.

Hiểu rõ HOC không chỉ giúp bạn làm chủ một công cụ mạnh mẽ, mà còn mang lại một cái nhìn sâu sắc hơn về kiến trúc và khả năng của React. Chúc bạn áp dụng thành công kỹ thuật này vào các dự án của mình!