Stateless và stateful component khác nhau như thế nào?

Stateless component là component không quản lý state nội bộ; nó chỉ nhận props và render UI dựa trên props đó. Stateful component là component có state nội bộ, thường dùng để lưu dữ liệu thay đổi theo thời gian hoặc tương tác người dùng.

Trước React Hooks, ranh giới này thường trùng với class component (stateful) và function component (stateless). Từ React 16.8, function component có thể dùng useState, useReducer, useEffect nên khái niệm "stateless" không còn đồng nghĩa với "function component". Thuật ngữ hiện tại thường dùng là "component có state" và "component không có state", thay vì gắn với kiểu khai báo.

Ví dụ:

// Stateless: chỉ render từ props
function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

// Stateful: quản lý state nội bộ
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Lỗi thường gặp: gọi component có useState là "stateless" chỉ vì nó là function component. Ngược lại, một component không dùng state nhưng vẫn có thể không "thuần tuý" nếu nó đọc biến ngoài, gọi API trong render, hoặc dùng Math.random() — những thứ này làm output không thể đoán trước từ props.

Lưu ý: Phân biệt stateless/stateful vẫn hữu ích khi thiết kế component: ưu tiên component không state để dễ test và tái sử dụng, đẩy state lên component cha hoặc dùng state management khi cần chia sẻ dữ liệu.