Batching hooks for result

use-batched-hook.js

import { useEffect, useState } from 'react'

export function useFirst() {
  const [value, setValue] = useState(0)

  useEffect(() => {
    setTimeout(() => {
      setValue(1)
    }, 4000)
  }, [])

  return value
}

export function useSecond() {
  const [value, setValue] = useState(0)

  useEffect(() => {
    setTimeout(() => {
      setValue(3)
    }, 2000)
  }, [])

  return value
}


export function useBatchedHooks() {
  const [results, setResults] = useState({ a: null, b: null, })

  const v1 = useFirst()
  const v2 = useSecond()

  useEffect(() => {
    setResults({ a: v1, b: v2 })
  }, [v1, v2])

  return {
    // this getter will contain logic to check if `a` has completed but no value
    // then move on to `b`
    get value() {
      return results
    }
  }
}