Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

use-async-memo

1.2.2 • Public • Published

useAsyncMemo

React hook for generating async memoized data.

API

function useAsyncMemo<T>(factory: () => Promise<T>, deps: DependencyList, initial?: T): T

If factory returns undefined or null, useAsyncMemo will leave the memoized value unchanged.

Demo

Fetch API:

const data = useAsyncMemo(doAPIRequest, [])

or

const data = useAsyncMemo(() => doAPIRequest(), [])

or

const data = useAsyncMemo(() => {
  return 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], [])

Install

npm i use-async-memo

DownloadsWeekly Downloads

297

Version

1.2.2

License

MIT

Unpacked Size

4.52 kB

Total Files

6

Last publish

Collaborators

  • avatar