Created
July 30, 2021 13:27
-
-
Save blackmann/8c9faa01c0bfb11052e397247d9f8769 to your computer and use it in GitHub Desktop.
Batching hooks for result
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment