Một component React re-render trong những trường hợp nào?

Có đúng ba nguồn kích hoạt:

1. State của chính nó thay đổi — gọi setter và giá trị mới khác giá trị cũ (so sánh bằng Object.is).
2. Component cha render lại — mặc định mọi component con render theo, kể cả khi props không đổi. Đây là điểm nhiều người hiểu sai nhất.
3. Context mà nó useContext có value mới.

Props thay đổi không phải nguyên nhân độc lập: props chỉ đổi được khi cha đã render lại, mà cha render thì con render sẵn rồi.

function Parent() {
  const [count, setCount] = useState(0)
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <Child />   {/* no props at all, still re-renders every click */}
    </>
  )
}

• Điều này không có nghĩa app chậm.
• Render là chạy lại hàm component để tính ra mô tả UI; React so sánh kết quả rồi chỉ ghi vào DOM phần thực sự khác.
• Chỉ tối ưu khi đo được là chậm.