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!