Simple hook to control of the flow of focus.

focus-hook.js

import React from "react"

export default function useFocus() {
const cachedElement = React.useRef(null)

const setFocusCache = () => (cachedElement.current = document.activeElement)

const setFocus = () =>
  cachedElement.current ? cachedElement.current.focus() : {}

return { setFocusCache, setFocus }

Usage

import useFocus from "./utils/focus-hook"

export default function App() {
  const { setFocusCache, setFocus } = useFocus()

  const initialRender = React.useRef(false)
  React.useEffect(() => {
    if (state.isDropdownShowing) {
      // When dropdown is open, cache the toggler.
      setFocusCache()
    } else {
      // Only trigger after the first render (useUpdatedEffect)
      if (!initialRender.current) {
        initialRender.current = true
        return 
      } 
      // Dropdown is now closed, set focus back to cached toggler.
      setFocus()
    }
  }, [state.isDropdownShowing, setFocus, setFocusCache])

  return // ...
}