Managing State in React with useRef

#javascript #react #webdev #programming

When building React applications, managing state is a fundamental aspect. While most developers are familiar with useState, the useRef hook often flies under the radar. In this blog, we’ll explore how useRef can be a powerful tool in managing state and understanding its unique use cases.

What is useRef?

The useRef hook returns a mutable ref object whose .current property is initialized to the passed argument. This ref object persists for the full lifetime of the component. Unlike state, changing a ref doesn’t cause a re-render of the component.

Why Use useRef?

Accessing DOM Elements: useRef is commonly used to directly access a DOM element, allowing you to manipulate it without causing a re-render.
Storing Mutable Values: You can use useRef to store values that don’t require re-rendering when updated, like timers or previous state values.

Example: Managing State with useRef

Let’s see how useRef can be used to manage state in a simple counter example. This example will show how to increment a counter without causing unnecessary re-renders.

Step-by-Step Implementation

import React, { useRef } from 'react';

function Counter() {
    // Create a ref to hold the count
    const countRef = useRef(0);

    const increment = () => {
        countRef.current += 1; // Increment the count
        alert(`Current Count: ${countRef.current}`); // Show the current count
    };

    return (
        <div>
            <h1>Counter Example</h1>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

export default Counter;

Breakdown of the Code

Creating a Ref: We initialize countRef using useRef(0). This sets the initial count to 0.
Incrementing the Count: In the increment function, we update countRef.current directly. This doesn’t trigger a re-render, which is efficient for performance.
User Feedback: An alert shows the current count each time the button is clicked.

When to Use useRef Over useState

Performance: If you need to store a value without causing a re-render, useRef is the way to go. This is particularly useful for performance-sensitive applications.
Non-UI State: Use useRef for values that are not directly related to rendering, such as timers, intervals, or form element references.

Conclusion

While useState is essential for managing state that affects rendering, useRef provides a lightweight alternative for managing mutable values without triggering re-renders. Understanding when to use useRef can help you write more efficient and effective React components.

So next time you're working with state in React, consider whether useRef might be the right tool for the job! Happy coding!

Top comments (3)

Samuel Rouse • Oct 29

Thanks for this article!

I have definitely made use of useRef for previous values, especially for form elements where input could come from the user or from the application, but I find it is often an "escape hatch" for a design problem in the application.

If your component needs a persistent value that changes separate from its render cycle, there's a good chance the component is doing too many things. I know that was the case for me! 😅

It's not always the case, and it is a useful tool when you are in a bind, but I would recommend anyone who reaches for this solution to take a moment and see if the problem could be resolved by shifting responsibility elsewhere.