Understanding The useRef React Hook

Continuing our React hooks series, we will learn about the useRef React hook in this blog post. The useRef React hook is a function that returns a mutable ref object. Refs are a way to access DOM nodes in React. The useRef React hook is useful in the following two situations: Accessing DOM elements directly inside React; Store state values that do not trigger re-renders and are persisted across re-renders

Continuing our React hooks series, we will learn about the useRef React hook in this blog post.

The useRef React hook is useful in the following two situations:

Accessing DOM elements directly inside React
Store state values that do not trigger re-renders and are persisted across re-renders

Before we see these advantages of this hook, let us first understand what the hook is and what it does.

What is the useRef React hook?

The useRef React hook is a function that returns a mutable ref object. Refs are a way to access DOM nodes in React.

const refContainer = useRef(initialValue);

The .current property of the object returned by the useRef React hook is initialized to the initial value that we pass in the hook. The returned object persists throughout the lifetime of the component.

In other words, useRef can be used as a container where we can store a mutable value.