How to use use-async-effect - 7 common examples

const { height } = useWindowSize()
  const [hasUnreadMessages, setHasUnreadMessages] = useState(false)
  const chatbarRef = useRef(null)
  const idleAudioRef = useRef(null)
  const sendAudioRef = useRef(null)
  const buttonRef = useRef(null)
  // One-off flag used to check if we're supposed to scroll to the bottom
  const shouldScrollToBottomRef = useRef(true)
  // The last stored scroll distance from the bottom of our chat list container
  // We want to update when then the user scrolls the container or the container size changes.
  const lastScrollDistanceFromBottom = useRef(0)
  // One-off flag used to check if it's a message sent through pusher
  const isReceivingRef = useRef(true)
  const isSubmittable = state.message.text.trimRight().trimLeft().length > 0

  useAsyncEffect(
    async () => {
      dispatch({
        type: 'request:init'
      })

      const [err, res] = await axios.get(`/api/parties/${props.party.id}/logs`)

      if (err != null) {
        return dispatch({
          type: 'request:error'
        })
      }

      dispatch({
        type: 'request:success',
        payload: { logs: res.data }

function Root(props: ReactComponentWrapper) {
  const [isLoading, setIsLoading] = React.useState(true)

  const auth: typeof AuthContainer = useUnstated(AuthContainer)

  useAsyncEffect(
    async () => {
      await auth.getUserData()
      setIsLoading(false)
    },
    null,
    []
  )

  // We'll wrap in fragment, otherwise we'll get an error saying:
  // JSX element type '{}' is not a constructor function for JSX elements.
  return isLoading ? <div> : {props.children}
}

</div>

function YouWereWatching() {
  const [isLoading, setIsLoading] = useState(true)
  const [party, setParty] = useState(null)

  useAsyncEffect(async () => {
    const [err, res] = await axios.get('/api/me/recent-party')

    if (err != null) {
      // Do something
    }

    setIsLoading(false)
    setParty(res.data.party)
  }, null, [])

  if (isLoading) {
    return null
  }

  if (party == null) {
    return null

function AppWatch(props: ReactComponentWrapper) {
  const { match } = useReactRouter()

  const [state, dispatch] = useReducer(reducer, {
    party: null,
    isLoading: true
  })

  useAsyncEffect(
    async () => {
      dispatch({
        type: 'data:init'
      })

      const [err, res] = await axios.get(`/api/parties/${match.params.partyId}`)

      if (err) {
        return dispatch({
          type: 'data:error'
        })
      }

      dispatch({
        type: 'data:success',
        payload: { party: res.data }

export function useSlackApi(
  prop: any,
  call: () => Promise
): [Array, boolean] {
  const [data, setData] = useState([] as Array);
  const [loading, setLoading] = useState(true);

  useAsyncEffect(
    async () => {
      try {
        const response = await call();
        setData(response);
      } catch (e) {
        alert(e.message);
        setData([]);
      }
      setLoading(false);
    },
    () => {},
    [prop]
  );
  return [data, loading];
}

function SubtitleSlot(props: Props) {
  const [state, setState] = useState(() => ({ tracks: [] }))

  useAsyncEffect(
    async () => {
      if (!props.video.subtitle_url) {
        return
      }

      const [err, res] = await axios.get(`api/videos/${props.video.id}/subtitle`, {
        validation: false
      })

      if (err != null) {
        return //
      }

      setState({
        tracks: srt2obj(res.data.subtitle)
      })

function ShowModal(props: Props) {
  const [state, dispatch] = useReducer(reducer, {
    groups: [],
    isLoading: false,
    selectedGroupId: props.currentVideo ? props.currentVideo.show_group_id : -1
  })

  const group = useMemo(() => {
    return state.groups.find(group => group.id === state.selectedGroupId)
  }, [state.groups, state.selectedGroupId])

  useAsyncEffect(
    async () => {
      if (props.show == null || props.show.title_type === 'movie') {
        return
      }

      dispatch({
        type: 'request:init'
      })

      const [err, res] = await axios.get(`api/shows/${props.show.id}/groups`)

      if (err != null) {
        return dispatch({
          type: 'request:error'
        })
      }