useAsyncMemo
React hook for generating async memoized data.
API
function useAsyncMemo<T>(factory: () => Promise<T>, deps: DependencyList, initial?: T): TIf factory returns undefined or null, useAsyncMemo will leave the memoized value unchanged.
Demo
Import
import {useAsyncMemo} from "use-async-memo"Fetch API:
const data = useAsyncMemo(doAPIRequest, [])or
const data = useAsyncMemo(() => doAPIRequest(), [])or
const data = useAsyncMemo(() => {
return doAPIRequest()
}, [])or
const data = useAsyncMemo(async () => {
return await doAPIRequest()
}, [])Search on inputting:
const [input, setInput] = useState()
const users = useAsyncMemo(async () => {
if (input === '') return []
return await apiService.searchUsers(input)
}, [input], [])Get loading status:
const [loading, setLoading] = useState(true)
const data = useAsyncMemo(async () => {
setLoading(true)
const response = await doAPIRequest()
setLoading(false)
return response
}, [])With ability of manual clearing:
const [input, setInput] = useState()
const [clearFlag, setClearFlag] = useState({
val: false
})
function clearItems() {
setClearFlag({
val: true
})
}
const users = useAsyncMemo(async () => {
if (clearFlag.val) {
clearFlag.val = false
return null
}
if (input === '') return []
return await apiService.searchUsers(input)
}, [input, clearFlag], [])With debounced value:
see use-debounce
const [input, setInput] = useState()
const [debouncedInput] = useDebounce(input, 300)
const users = useAsyncMemo(async () => {
if (debouncedInput === '') return []
return await apiService.searchUsers(debouncedInput)
}, [debouncedInput], [])