score:1

Just to mention, in 2022, if you'are using some bundler that allows top-level await, you can read the async value outside of the component, so

import { useEffect, useState } from 'react'

const someValue = await getSomeValue();//<=this
const App = () => {
  const [value, setValue] = useState(someValue)
}

score:6

Use the combination of useEffect and useState to initialise a value asynchronously which you can change on ui.

import { useEffect, useState } from 'react'
import { useRouteMatch } from 'react-router-dom'

const App = () => {
  const [value, setValue] = useState()
  
   const { params } = useRouteMatch('/document/:id')
  
  useEffect(() => {
    someAsyncStuff(params.id).then(data => setValue(data))
  }, [params])
  
  return (
    <select
      value={value}
      onChange={({target: { value }}) => setValue(value)}>
      <option value={1}>one</option>
      <option value={2}>two</option>   
    </select>
  )
}

Related Query

More Query from same tag