Focus on Mount

sometimes you want to focus an element when it mounts. this is a hook that does that.

import * as React from 'react'
 
export const useFocusOnMount = () => {
  const ref = React.useRef<HTMLElement>(null)
 
  React.useEffect(() => {
    ref.current?.focus()
  }, [])
 
  return ref
}

and i use it like this:

export const MyInput = () => {
  const ref = useFocusOnMount()
 
  return <input ref={ref} />
}

Explanation

This hook is pretty simple. It returns a ref that you can attach to an element. When the element mounts, it will focus the element. This is useful for things like modals, where you want to focus the first input when the modal opens.