HOC (Higher Order Components): Khi nào vẫn nên dùng?

HOC là một hàm nhận vào 1 Component và trả về 1 Component mới "xịn hơn". const EnhancedComponent = withSomething(BaseComponent);

1. Thời đại Hooks

Hooks giải quyết việc chia sẻ logic state. HOC giải quyết việc chia sẻ cấu trúc/lifecycle.

Ví dụ Hooks: useUser() lấy data user. Ví dụ HOC: withAuth(Page) kiểm tra user, nếu chưa login -> Redirect. Nếu ok -> Render Page.

2. Code Mẫu: withAuth

function withAuth(Component) {
  return function AuthenticatedComponent(props) {
    const user = useUser();
    const router = useRouter();

    useEffect(() => {
      if (!user) router.push('/login');
    }, [user]);

    if (!user) return <LoadingSpinner />;

    // Truyền props cũ + props mới (user) xuống
    return <Component {...props} user={user} />;
  };
}

// Usage
function Dashboard({ user }) {
  return <h1>Xin chào {user.name}</h1>;
}

export default withAuth(Dashboard);

3. Khi nào dùng HOC?

1. Authenticated Routes: Bọc page để bảo vệ (như ví dụ trên).
2. Tracking/Analytics: withTracking(Button) -> Tự động gửi log khi click mà không cần sửa code Button.
3. Error Boundaries: Hooks không thể bắt lỗi render (chỉ class component làm được). withErrorBoundary(Component) là giải pháp duy nhất.

4. Nhược điểm (Pitfalls)

1. Prop Collision: Hook useAuth trả về prop user, HOC trả về prop user. Nếu dùng cả 2 -> Xung đột tên.
2. Wrapper Hell: withAuth(withLayout(withTheme(Component))). Cây DOM sâu hoắm.

Kết luận

Đừng lạm dụng HOC cho logic chia sẻ state (hãy dùng Hooks). Chỉ dùng HOC cho các Layer bao bọc (Wrapper Layers) như Security, Error Handling.