Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

View astoilkov's full-sized avatar

Antonio Stoilkov astoilkov

View GitHub Profile

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
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.
*

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
astoilkov / readme.md
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.

Problem