According to React official documentation, useRef is a React Hook that lets you reference a value that’s not needed for rendering.

Basically, useRef is a tool provided by React that helps you store values that can be accessed and modified without causing your component to re-render. It is commonly used to work with the DOM, like getting a reference to an input field and then accessing or changing its value. It's like having a sticky note that remembers a value or a thing for you, and you can easily access and modify it later without causing the component to re-render.

useRef can also be used to store and manipulate other values, such as the previous state of a component or a reference to a setInterval/setTimeout ID, among other things.

To work with refs in React you need to first initialize a ref which is what the useRef hook is for. This hook is very straightforward and takes an initial value as the only argument.

useRef(initialValue)

This hook then returns a ref for you to work with.

const myRef = useRef(null)

Here, myRef is an object. If we logged into the console we will get the output like this {current : null}.

This object contains a property called current, which can be used to store and access the current value of the reference.

The current property of a useRef object is initially set to the value passed as an argument to the useRef hook. For example, if you call useRef(null), the current property of the returned object will be null by default.

You can access the current property of a useRef object by using the .current syntax. For example, if you have a useRef object called myRef, you can access its current value by calling myRef.current.

Here is an example to explain useRef in React

import { useRef, useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  const handleButtonClick = () => {
    countRef.current = countRef.current + 1;
    setCount(countRef.current);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleButtonClick}>Increment</button>
    </div>
  );
}

1. First, we import both useRef and useState hooks from the react package.

2. We declare a new state variable called count and a function called setCount that allows us to update the count variable.

3. We create a new countRef variable using useRef, which we initialize with the current value of count.

4. We define a function called handleButtonClick, which is called when the button is clicked. This function:

   • Increments the value of countRef.current.

   • Sets the state of count to the new value of countRef.current.

   • Because countRef.current is a reference to the same object across renders, changing its value doesn't trigger a re-render, and so we can use it to store the previous value of count.

5. Finally, we render a paragraph element that displays the current value of count, and a button that triggers the handleButtonClick function when clicked.

In this example, we're using useRef to store a mutable reference to the previous value of the count state variable. We can then update this reference without triggering a re-render, and use it to update the state of count without losing the previous value.

Conclusion:

useRef is a React hook that provides a way to store a mutable reference to a value or object, which can be useful for working with the DOM or class components. It allows access to and modification of values outside of the normal React rendering cycle, without triggering re-renders.