What is React useRef Hook in React and How to Use It?

In this post, we'll take a deep dive into the useRef hook and explore how you can use it to solve some common problems in React development.

If you're a React developer, you're probably familiar with the concept of using "refs" to access DOM elements in your components. But what if you need to store a value that persists across renders, without triggering a re-render when it changes? That's where the useRef hook comes in.

What is the useRef Hook in React?

The useRef hook is a built-in hook in React that allows you to create a mutable reference that persists for the lifetime of the component. It returns an object with a single property called current, which can be assigned any value.

Unlike state, updating the current property of a useRef object does not trigger a re-render of the component. This makes it useful for storing values that you need to access between renders without triggering unnecessary updates.

How to Use useRef Hook in React

The useRef hook is simple to use. To create a ref, call the useRef hook with an initial value:

import { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(initialValue);
  // ...
}

Once you have a ref, you can access its current property to read or modify its value:

myRef.current = newValue;
const currentValue = myRef.current;

Here's a simple example that demonstrates how to use useRef to store a reference to an input element and focus it when a button is clicked:

import { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </>
  );
}

In this example, we create a ref using useRef and assign it to the ref attribute of the input element. When the button is clicked, we call the focus() method of the inputRef.current property to set the focus on the input field.

Conclusion

In conclusion, the useRef hook is a powerful tool for managing state in your React components. By allowing you to store mutable values that persist across renders without triggering unnecessary updates, it can help you optimize the performance of your React application. If you want to learn more about React Hooks we have covered comprehensive guide that you can check out.

Whether you're building a simple form or a complex UI, useRef can help you simplify your code and improve the user experience. So give it a try in your next React project and see how it can help you!