Is useMemo asynchronous like useState Hook?

Question

Usually we cannot use the state value of useSate immediately after setting it. Is it the same for useMemo?

Answer 1

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.