Props và state khác nhau ở đâu?

Props là dữ liệu component nhận từ bên ngoài và không được sửa; state là dữ liệu component tự giữ và tự đổi. Ranh giới nằm ở chỗ ai sở hữu giá trị đó.

Hình dung một hàm: props là tham số truyền vào, state là biến cục bộ hàm tự khai báo. Hàm không tự đổi tham số của người gọi, nhưng đổi biến của mình thì thoải mái.

function SearchBox({ placeholder, onSubmit }) {   // props — của cha
  const [text, setText] = useState('')            // state — của mình

  return (
    <input
      placeholder={placeholder}
      value={text}
      onChange={(e) => setText(e.target.value)}
    />
  )
}

Ở đây placeholder do cha quyết định, SearchBox chỉ đọc. Còn text là chuyện riêng của ô input, cha không cần biết.

Khác biệt kéo theo vài hệ quả thực tế:

• Sửa được hay không. Gán thẳng props.x = 1 là sai và React không đảm bảo gì cả. Muốn đổi thì gọi callback cha truyền xuống. State thì đổi qua setter.
• Ai kích hoạt re-render. setState làm component render lại. Props đổi cũng làm con render lại, nhưng nguồn cơn nằm ở cha.
• Đi lên hay đi xuống. Props chảy một chiều từ trên xuống. Muốn con báo ngược lên cha, cha truyền hàm xuống làm prop.

Câu hỏi thực dụng khi thiết kế: giá trị này có cần chia sẻ với component khác không? Cần thì đẩy lên cha thành props (lifting state up); không cần thì để làm state cục bộ.

Lưu ý: Đừng sao chép props vào state kiểu const [name, setName] = useState(props.name). Bản sao đó chỉ nhận giá trị ở lần render đầu, props đổi về sau sẽ không tới nơi — đây là nguồn bug "dữ liệu không cập nhật" rất hay gặp.