Usually we cannot use the state value of useSate immediately after setting it. Is it the same for useMemo?
useMemo
is asynchronous if it depends on asynchronous
values such as useState
.
To explain this, let's check a demo component:
import React, { useEffect, useMemo, useState } from 'react'
const App = () => {
const [value, setValue] = useState(1)
const memoValue = useMemo(() => value + 1, [value])
console.log('value is: ', value)
console.log('memoValue is: ', memoValue)
useEffect(() => {
setValue(10)
console.log('effect value is: ', value)
console.log('effect memoValue is: ', memoValue)
}, [])
return (
<div>test</div>
)
}
export default App
Its console output is:
value is: 1
memoValue is: 2
effect value is: 1
effect memoValue is: 2
value is: 10
memoValue is: 11
As you can see, after setValue
in useEffect
, value
is old, so does memoValue
.
Explain:
You can treat hooks as a function who re-executes when state
or props
changes. useMemo
is just a memorized function.
setValue
changes App
's state, marks App as a dirty component(need re-execute), but before App
re-executes, memoValue
has no way to update its value, so it is asynchronous
in your definition.