Exploring useRef: A Must-Know Hook for Every React Developer

In the world of React, hooks play a crucial role in managing state and side effects in functional components. Among these hooks, useRef stands out as a powerful tool for creating mutable reference objects. This blog post delves into the useRef hook, exploring its definition, purpose, and comparison with other React hooks.

We'll also discuss when and how to use useRef, its basic syntax, and provide examples of useRef for DOM manipulation and storing mutable variables. Whether you're a seasoned React developer or a beginner, this comprehensive guide will help you understand and effectively use the useRef hook in your React applications.

‍

What is useRef?

‍

Definition and Purpose of useRef

The useRef hook in React is a function that returns a mutable ref object. This ref object persists for the full lifetime of the component. The returned object's .current property is initialized with the passed argument (initialValue). This initial value can be anything, and it's the value that the mutable ref object will hold during the component's initial render.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
     import React, { useRef } from 'react';
    
    function App() {
      const ref = useRef('initial value');
    
      return (
        <div>
          <input ref={ref} type="text" />
        </div>
      );
    }
     

In the above example, the useRef hook is used to create a reference to an input element in a functional component. The ref attribute is then assigned to the input element, allowing us to access the DOM element directly.

The useRef hook is commonly used for accessing DOM elements and storing mutable values. It's important to note that changing the ref object or the current property doesn't trigger re-rendering of the component.

‍

Comparison of useRef with Other React Hooks

The useRef hook is unique among React hooks. Unlike useState or useEffect, changes to a useRef don't trigger re-renders of the component. This makes useRef an excellent choice for storing values that you want to persist across re-renders but don't want to cause re-rendering.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
     import React, { useState, useRef } from 'react';
    
    function App() {
      const [state, setState] = useState('initial value');
      const ref = useRef('initial value');
    
      const handleClick = () => {
        setState('new value');
        ref.current = 'new value';
      };
    
      return (
        <div>
          <button onClick={handleClick}>Change Values</button>
          <p>State: {state}</p>
          <p>Ref: {ref.current}</p>
        </div>
      );
    }
     

In the above code, both useState and useRef are initialized with the same initial value. When the button is clicked, both the state and the ref are updated. However, only the change in state causes the component to re-render.

‍

When to use useRef?

‍

Scenarios where useRef is applicable

The useRef hook is commonly used in a variety of scenarios in React development. Here are some of the most common use cases:

Accessing DOM Elements: useRef is often used to create a reference to a DOM element. This reference can then be used to read or modify the properties of that element.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
     import React, { useRef } from 'react';
    
    function App() {
      const inputRef = useRef();
    
      const focusInput = () => {
        inputRef.current.focus();
      };
    
      return (
        <div>
          <input ref={inputRef} type="text" />
          <button onClick={focusInput}>Focus the input</button>
        </div>
      );
    }
     

In the above example, useRef is used to create a reference to an input field. When the button is clicked, the input field is focused.

Storing Mutable Values: useRef can also be used to store mutable values. The value stored in a ref persists across re-renders and does not cause a re-render when changed.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
     import React, { useRef, useEffect } from 'react';
    
    function App() {
      const renderCount = useRef(0);
    
      useEffect(() => {
        renderCount.current = renderCount.current + 1;
      });
    
      return (
        <div>
          <p>This component has rendered {renderCount.current} times.</p>
        </div>
      );
    }
     

In this example, useRef is used to keep track of the number of times the component has been rendered. The value is incremented in a useEffect hook after each render.

‍

Understanding when not to use useRef

While useRef is a powerful tool, it's not always the best solution. Here are a few scenarios where you should avoid using useRef:

Storing State: If you need to store a value that, when changed, should cause the component to re-render, you should use useState or useReducer instead of useRef.

Storing Immutable Values: If the value you're storing doesn't change over time, consider using a constant instead of a ref.

‍

Basic Syntax of useRef

‍

Explanation of the useRef syntax

The useRef hook in React is a built-in hook that allows you to create mutable reference objects. The basic syntax of useRef is as follows:

Copy
1
2
3
4
5
6
     import React, { useRef } from 'react';
    
    function App() {
      const ref = useRef(initialValue);
    }
     

In the above code, useRef is called with an initial value, and it returns a mutable ref object. This ref object is then stored in a variable (in this case, ref).

‍

Breaking down the components of useRef

Let's break down the components of useRef:

Importing useRef: Before you can use useRef, you need to import it from 'react'. This is done using the import statement.

Calling useRef: useRef is a function, and you call it with an initial value. This initial value is what the ref will hold during the component's initial render.

The Ref Object: useRef returns a mutable ref object. This object has a single property, .current, which holds the current value of the ref. The .current property is initialized to the initial value passed to useRef.

Copy
1
2
3
4
5
6
7
8
     import React, { useRef } from 'react';
    
    function App() {
      const ref = useRef('initial value');
    
      console.log(ref.current); // 'initial value'
    }
     

In the above example, useRef is called with the initial value 'initial value'. The returned ref object is then logged to the console, showing that the .current property is indeed 'initial value'.

‍

A Simple useRef Example

‍

Step-by-step Walkthrough of a Basic useRef Example

A simple example of how to use the useRef hook in a functional component to store a mutable variable, specifically a timer ID for a setInterval function.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
     import React, { useRef, useEffect } from 'react';
    
    function Timer() {
      const timerIdRef = useRef();
    
      useEffect(() => {
        timerIdRef.current = setInterval(() => {
          console.log('Timer tick');
        }, 1000);
    
        return () => {
          clearInterval(timerIdRef.current);
        };
      }, []);
    
      return (
        <div>
          Check your console for timer ticks every second.
        </div>
      );
    }
     

Here's a step-by-step walkthrough of the code:

1. First, we import React, useRef, and useEffect from the 'react' library.
2. We define a functional component named Timer.
3. Inside Timer, we call useRef with no initial value and assign the returned ref object to timerIdRef.
4. We define a useEffect hook that sets up an interval when the component mounts. The ID returned by setInterval is stored in timerIdRef.current.
5. When the component unmounts, the cleanup function of the useEffect hook clears the interval using the ID stored in timerIdRef.

In this example, useRef is used to create a reference to a mutable variable, the timer ID. This reference is stored in timerIdRef. The useEffect hook sets up an interval when the component mounts and stores the ID of the interval in timerIdRef.current. When the component unmounts, the cleanup function of the useEffect hook uses the ID stored in timerIdRef.current to clear the interval.

‍

useRef for DOM Manipulation

‍

Explanation of how useRef can be used for DOM Manipulation

The useRef hook in React is a powerful tool that allows you to create a reference to a DOM element. This reference can be used to read or modify properties of the DOM element, effectively allowing you to manipulate the DOM directly from your React code.

While React promotes a declarative approach to building UIs, there are times when you might need to imperatively manipulate the DOM. For example, you might need to set the focus on an input field, measure the dimensions of an element, or interact with a third-party library that manipulates the DOM directly.

In these cases, useRef can be used to create a reference to a DOM element. This reference is an object with a current property that points to the current instance of the DOM element. You can then use this reference to manipulate the DOM element.

‍

useRef Example for DOM Manipulation

In this example, we'll create a functional component with a div element and a button. When the button is clicked, the color of the div element will be toggled between red and blue.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
     import React, { useRef } from 'react';
    
    function ColorToggle() {
      const divRef = useRef();
    
      const toggleColor = () => {
        const currentColor = divRef.current.style.backgroundColor;
        divRef.current.style.backgroundColor = currentColor === 'red' ? 'blue' : 'red';
      };
    
      return (
        <div>
          <div ref={divRef} style={{backgroundColor: 'red', height: '100px', width: '100px'}}></div>
          <button onClick={toggleColor}>Toggle color</button>
        </div>
      );
    }
     

In this example, useRef is used to create a reference to the div element. This reference is stored in divRef. The toggleColor function is an event handler that gets triggered when the button is clicked. Inside this function, divRef.current refers to the div element in the DOM. The color of the div element is toggled between red and blue by changing the backgroundColor property of divRef.current.style.

‍

useRef for Storing Mutable Variables

‍

Explanation of how useRef can be used to store mutable variables

In addition to accessing DOM elements, useRef can also be used to store mutable variables. This is useful when you need to keep track of a value that can change over time and doesn't cause a re-render when it changes.

The value stored in a ref persists across re-renders, making it an ideal place to store values that you want to persist across the lifetime of the component but don't want to cause a re-render when they change.

‍

useRef example for storing mutable variables

In this example, we'll create a functional component that keeps track of the number of times a button is clicked without causing a re-render.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
     import React, { useRef } from 'react';
    
    function ClickCounter() {
      const clickCountRef = useRef(0);
    
      const incrementClickCount = () => {
        clickCountRef.current = clickCountRef.current + 1;
        alert(`Button clicked ${clickCountRef.current} times.`);
      };
    
      return (
        <div>
          <button onClick={incrementClickCount}>Click me</button>
        </div>
      );
    }
     

In this example, useRef is used to create a ref that holds the number of times the button has been clicked. This ref is stored in clickCountRef. The incrementClickCount function is an event handler that gets triggered when the button is clicked. Inside this function, the current property of clickCountRef is incremented, and an alert is displayed with the current click count.

This example demonstrates how useRef can be used to store mutable variables that persist across re-renders without causing a re-render when they change.

‍

Effectively Use Useref to Your React Applications!

In this blog post, we've explored the useRef hook in React, a powerful tool that allows you to create mutable reference objects. We've learned that useRef is commonly used for accessing DOM elements and storing mutable variables that persist across re-renders without causing a re-render when they change.

While useRef is a versatile tool, it's important to remember that it's not always the best solution. React is primarily a declarative framework, and most of the time, you should not need to use refs. However, when you do need to bridge the gap between the declarative React world and the imperative DOM world, or when you need to store mutable values that persist across re-renders, useRef is an invaluable tool in your React toolkit.

We hope this blog post has provided you with a solid understanding of useRef and how to use it effectively in your React applications.

‍