The useRef hook lets you keep a mutable value that persists across renders without causing a re-render when it changes. It’s most commonly used to access DOM elements or to store values between renders.

Basic syntax

const ref = useRef(initialValue);

• Returns an object: { current: initialValue }
• The value lives on ref.current
• Updating ref.current does not trigger a re-render

focus input field

• click button to focus cursor inside input field

  

  

• const formInputRef = React.useRef(null)
  • formInputRef: return value of invoking useRef hook
• define focusInput() function to handle button clicks
  • accesses formInputRef object and applies focus() on current property
• set JSX expression of formInputRef as the value of the ref attribute on the input element
• onClick event handling attribute → focusInput()
• React will create the input element’s DOM node and render it on the screen
  • this DOM node is assigned as the value of the current property of the ref object
  • makes it possible to access the input DOM node + all its properties and values using formInputRef.current
• since we are accessing the focus function on the input elements DOM node use formInputRef.current.focus() - triggered on button click
  • makes it possible to focus on input field without user having to click, tap, or type into it

additional resources

• The React docs also has a reference on using the useRef hook which is a great example of various options that are available when working with the useRef hook.