Skip to content

Instantly share code, notes, and snippets.


Antonio Stoilkov astoilkov

View GitHub Profile


Using a single input which gets focused on mousedown event of the editor element:

  • 😄 single source of truth, if input is focused then the editor is focused, simple and elegant
  • 😡 need to always call e.preventDefault() in a mousedown handler
  • 😡 elements with attribute draggable either can't get dragged or blur the editor

Both the editor element and an input can have focus:

  • 😄 no need for a custom focus() function, editor.element.focus() is sufficient
  • 😡 two elements can be focused which is confusing and needs extra work to get handled

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 Mar 16, 2020
React hook for debouncing callbacks
View useDebounceCallback.ts
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 Apr 4, 2021
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.