So sánh các pattern tái sử dụng logic trong React: HOC, render props và custom hook — vì sao hooks thắng thế?

Ba thế hệ pattern giải cùng một bài toán: tái sử dụng logic stateful (subscribe, fetch, theo dõi kích thước...) giữa nhiều component.

• HOC (Higher-Order Component): hàm nhận component, trả về component mới đã bọc thêm logic — withRouter(withTheme(MyComponent)). Nhược: wrapper hell trong devtools, props "tàng hình" không rõ từ đâu tới, đụng tên prop giữa các HOC, khó type với TypeScript.
• Render props: component nhận một hàm render làm prop/children — <Mouse>{pos => <Cat pos={pos} />}</Mouse>. Nguồn dữ liệu tường minh hơn HOC, nhưng nhiều nguồn logic → JSX lồng sâu hình kim tự tháp.
• Custom hook (từ React 16.8): hàm useXxx gọi các hook khác — const pos = useMousePosition(). Logic tái sử dụng ở tầng hàm thuần, không thêm tầng component nào vào cây.

Vì sao hooks thắng: nguồn giá trị tường minh ngay tại dòng gọi; compose tự nhiên (hook gọi hook, nhiều hook cạnh nhau không lồng nhau); không đổi hình dạng cây component; type inference với TypeScript gần như miễn phí. HOC/render props vẫn còn chỗ đứng hẹp: HOC khi cần bọc ở ranh giới component (vd error boundary, code splitting), render props khi phần UI — chứ không chỉ logic — cần được tham số hóa.