Asynchronous React Hooks

Write React hooks in asynchronous way

Try out useWhisper a React hook for OpenAI Whisper API

https://github.com/chengsokdara/use-whisper

• Install

npm i @chengsokdara/react-hooks-async

yarn add @chengsokdara/react-hooks-async

• Usage

• useCallbackAsync

import { useCallbackAsync } from '@chengsokdara/react-hooks-async'

const App = () => {
  const sampleCallback = useCallbackAsync(
    // will be wrapped in try catch
    async () => {
      await promiseFunction()
    },
    // Optional: catch error
    (err) => {
      console.error(err)
    },
    // dependency list
    []
  )

  return (
    <div>
      <button onClick={() => sampleCallback()}>Fire</button>
    </div>
  )
}

• useEffectAsync

import { useEffectAsync } from '@chengsokdara/react-hooks-async'
import { useState } from 'react'

const App = () => {
  const [state, setState] = useState<boolean>(false)

  useEffectAsync(
    // will be wrapped in try catch
    async () => {
      const response = await callBackend()
      setState(result.data)
    },
    // Optional: cleanup function when component unmounted
    () => {
      setState(undefined)
    },
    // Optional: catch error
    (err) => {
      console.error(err)
    },
    // dependency list
    []
  )

  return (
    <div>
      <p>
        <b>State:</b> {state}
      </p>
    </div>
  )
}

• useMemoAsync

import { useMemoAsync } from '@chengsokdara/react-hooks-async'

const App = () => {
  const memoizedValue = useMemoAsync(
    // will be wrapped in try catch
    async () => {
      const response = await promiseFunction()
      return response + 1
    },
    // Optional: catch error
    (err) => {
      console.error(err)
    },
    // dependency list
    []
  )

  return (
    <div>
      <p>
        <b>Value:</b> {memoizedValue}
      </p>
    </div>
  )
}

• Roadmap

  • add useTransition
  • add useLayoutEffect
  • add useImperativeHandle

Contact me for web or mobile app development using React or React Native
https://chengsokdara.github.io