1. Component là gì?
Component trong React là khối xây dựng cơ bản của một ứng dụng.
Cho phép bạn phân chia giao diện người dùng (UI) thành các phần nhỏ, độc lập, dễ tái sử dụng và có thể ghép nối (compose) với nhau để tạo ra giao diện phức tạp.
2. Hook là gì?
2.1 React Hook
Hook là các hàm đặc biệt được cung cấp bởi thư viện reactjs. Mỗi cái hook này có một cái tính năng tùy vào trường hợp mà ta có thể sử dụng.
Như là: useState, useEffect, useRef…
2.2 Custom Hook
Custom Hook là một hàm do bạn tự viết, dùng để tách phần logic ra khỏi component và tái sử dụng logic đó ở nhiều nơi.
=>Tên hook phải bắt đầu bằng “use”
3. Các tổ chức Component + Hook
3.1 Presentational Component(UI Component)
- Stateless (không chứa logic nghiệp vụ)
- Trách nhiệm chính: Chỉ lo hiển thị UI (render giao diện).
- Tách UI ra khỏi logic để code dễ đọc và dễ bảo trì.
- Không gọi API, không xử lý business logic.
- Nhận các dữ liệu từ container component
3.2 Container Component
- Stateful (quản lý state và logic)
- Trách nhiệm chính: Chứa logic nghiệp vụ, quản lý dữ liệu và state.
- Truyền dữ liệu và hàm callback xuống Presentational Component qua props.
=> Container nắm dữ liệu nhưng không biết render. Presentational biết render nhưng không biết dữ liệu từ đâu ra.
Ví dụ dễ hiểu: Container giống như ông bố đi chợ mua nguyên liệu (data từ API, state…). Presentational giống như bà mẹ nhận nguyên liệu đó, rồi nấu nướng và trình bày món ăn đẹp mắt lên bàn (UI).
3.3 Layout Component
Quản lý cấu trúc chung của trang web, bao gồm các thành phần cố định như Header, Footer, Sidebar và các Container cho nội dung chính.
Giữ bố cục cố định cho tất cả các trang, không chứa logic nghiệp vụ.
Vì sao cần tổ chức Component + Hook?
- React không chỉ là viết component cho giao diện.
- Điều quan trọng là tổ chức sao cho code dễ đọc, dễ mở rộng, dễ test.
- Tách biệt UI (Presentational) và logic (Container + Hooks) giúp dự án sạch hơn. Điều này giúp code maintainable và dễ mở rộng về sau.