astoilkov

Async Operations with useReducer Hook

9 March, 2019

We were discussing with @erusev what we can do with async operation when using useReducer() in our application. Our app is simple and we don't want to use a state management library. All our requirements are satisfied with using one root useReducer(). The problem we are facing and don't know how to solve is async operations.

In a discussion with Dan Abramov he recommends Solution 3 but points out that things are fresh with hooks and there could be better ways of handling the problem.

Problem

astoilkov

Batching makes it difficult to perform imperative actions like focus

Solution to the problem discussed with Dan Abramov here.

implementation:

export default function useQueueFocus(): (elementRef: React.MutableRefObject<HTMLElement | null>) => void {
  const isUnmountedRef = useRef(false)
  const forceUpdate = useForceUpdate()
  const ref = useRef<MutableRefObject<HTMLElement | null> | undefined>(undefined)

astoilkov

import { useCallback, useLayoutEffect, DependencyList } from 'react'

/**
 * This version bounces each version of the callback. This ensures that the callback
 * will be called with each state of the application. That's why `deps` is a required argument.
 *
 * Previous version used `useRef` for `timeoutId` and didn't have `deps` argument.
 * This resulted in missing calling the callback for the previous state and necessarily
 * calling it for the new state.
 *

astoilkov

Keybase proof

I hereby claim:

• I am astoilkov on github.
• I am astoilkov (https://keybase.io/astoilkov) on keybase.
• I have a public key ASCfED5w2HyhsQG-qWdp_c6dv2trFPeRkIi2n-MFw9Tu0wo

To claim this, I am signing this object: