useRef is a hook in React that allows you to create a mutable reference to a value. It is a way to store a value that will not trigger a re-render when it changes.

Here's an example of how to use useRef:

import { useRef } from 'react'

function Example() {
  const inputRef = useRef(null)
  const focusInput = () => inputRef.current.focus()

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus input</button>
    </div>
  )
}

In this example, the inputRef value is created using useRef and passed as the ref attribute to the input element. The focusInput function uses the current property of the inputRef to focus the input. Because the inputRef value is mutable, it can be updated without causing a re-render.

You can also use useRef to store mutable values other than DOM elements. For example, you might use it to store a timer ID or a WebSocket connection.

The value stored in the ref is mutable, but the reference itself is not. This means that if you update the value of the ref, it will not cause a re-render.

For example:

import { useRef } from 'react'

function Example() {
  const countRef = useRef(0)
  const increment = () => countRef.current++
  return <button onClick={increment}>{countRef.current}</button>
}

In this example, the countRef value is created using useRef and initialized to 0. The increment function increments the current property of the countRef, but this does not cause a re-render.

There are a few nuances to be aware of when using useRef:

• The value stored in the ref is mutable, but the reference itself is not. This means that if you update the value of the ref, it will not cause a re-render.

• The value of the ref will not change between renders, so it can be used as a way to preserve state across renders.

• If you need to store a value that should trigger a re-render when it changes, consider using the useState hook instead.