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:

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