Skip to content

Instantly share code, notes, and snippets.

View astoilkov's full-sized avatar

Antonio Stoilkov astoilkov

View GitHub Profile

Batching makes it difficult to perform imperative actions like focus

Solution to the problem discussed with Dan Abramov here.


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 / useDebounceCallback.ts
Last active March 16, 2020 08:22
React hook for debouncing callbacks
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.

Keybase proof

I hereby claim:

  • I am astoilkov on github.
  • I am astoilkov ( on keybase.
  • I have a public key ASCfED5w2HyhsQG-qWdp_c6dv2trFPeRkIi2n-MFw9Tu0wo

To claim this, I am signing this object:

astoilkov /
Last active March 13, 2024 10:19
Async Operations with useReducer Hook

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.