Why does my React state update not reflect immediately after setState?

Dev Overflow

Home

Community

Collections

Find Jobs

Why does my React state update not reflect immediately after setState?

asked 1 month ago

1.3K

I have a counter and I log right after calling the setter:

1const [count, setCount] = useState(0)
2
3const handleClick = () => {
4  setCount(count + 1)
5  console.log(count) // still the old value
6}

1const [count, setCount] = useState(0)
2
3const handleClick = () => {
4  setCount(count + 1)
5  console.log(count) // still the old value
6}

The UI updates correctly, but the log is always one behind. Am I misusing the hook?

react

javascript

1 Answer

Kenji Tanaka

• answered 1 month ago

You are not misusing it — count is a const binding captured by that render's closure. Calling the setter schedules a re-render; it does not reassign the existing variable.

The next render creates a new count binding with the new value. Your log belongs to the old render, so it prints the old value forever.

If the next value depends on the previous one, use the updater form:

1setCount((prev) => prev + 1)

1setCount((prev) => prev + 1)

And if you need to react to the committed value, use an effect:

1useEffect(() => {
2  console.log(count)
3}, [count])

1useEffect(() => {
2  console.log(count)
3}, [count])

of 1

Write your answer here

Popular Tags

Global search

Why does my React state update not reflect immediately after setState?

1 Answer

Write your answer here

Top Questions

Popular Tags