Quartz 🪬

State as a Snapshot

2 min read

Việc cập nhật state không làm thay đổi giá trị hiện tại mà chỉ giúp trigger quá trình re-render. Trong quá trình re-render, giá trị của state sẽ được gán bởi một giá trị mới được trả về từ useState.

Ví dụ:

import { useState } from "react"
 
function App() {
  const [name, setName] = useState("Taylor")
 
  function handleClick() {
    setName("Robin")
    console.log(name) // Still "Taylor"!
  }
 
  return (
    <>
      <p>My name is {name}</p>
      <button onClick={handleClick}>Change name</button>
    </>
  )
}

Giả sử chúng ta cập nhật state dựa trên giá trị hiện tại nhiều lần liên tiếp:

import { useState } from "react"
 
function App() {
  const [number, setNumber] = useState(0)
 
  function handleClick() {
    setNumber(number + 1)
    setNumber(number + 1)
    setNumber(number + 1)
  }
 
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={addOne}>Add Three</button>
    </div>
  )
}

Các dòng cập nhật state ở trên sẽ tương đương với:

setNumber(0 + 1)
setNumber(0 + 1)
setNumber(0 + 1)

Có thể thấy, mặc dù có 3 lần cập nhật state nhưng 3 lần này đều cập nhật giá trị của state thành 1 do giá trị hiện tại của state vẫn chưa bị thay đổi.

Để có thể cập nhật state dựa trên state trước đó, ta cần sử dụng kỹ thuật functional update.

Resources