AsyncHookComponent

Within the react component, you often need to get the data asynchronously and then render, so the following code is written:

const Uv = () => {
  const [site_uv, setState] = useState(0)

  useEffect(() => {
    fetchUV().then(({ site_uv }) => setState(site_uv))
  }, [])

  return <div>uv:{site_uv}</div>
}

The above process can be encapsulated as a custom hook, for example:

const useAsync = <T>(p: () => Promise<T>, initState?: T) => {
  const [state, setState] = useState(initState)

  useEffect(() => {
    p().then(setState)
  }, [])

  return state
}

Then use within the assembly:

export const Uv = () => {
  const { site_uv } = useAsync(fetchUV, { site_uv: 0 })
  return <div>uv:{site_uv}</div>
}

It's a lot simpler.