When to Use useRef() Instead of useState() in React

React, a popular JavaScript library for building user interfaces, provides developers with various hooks to manage state and effects. Two commonly used hooks are useState() and useRef(). While useState() is the go-to choice for managing dynamic state, useRef() serves a different purpose that can be highly beneficial in certain situations. In this article, we’ll explore the scenarios where you should consider using useRef() over useState() and provide relevant code examples.

The Basics of useState() and useRef()

Before diving into the scenarios, let’s briefly recap the core concepts of useState() and useRef().

• useState(): The useState() hook is used to manage state in functional components. It returns a state variable and a function to update that variable. When the state changes, the component re-renders.
• useRef(): The useRef() hook is primarily used to access and interact with DOM elements or to maintain values across renders without triggering re-renders. Unlike useState(), changing the value of a useRef() does not trigger a re-render.

Scenarios for Using useRef() Instead of useState()

1. Preserving Values Across Renders

In cases where you need to store a value that should persist across renders but doesn’t trigger re-renders, useRef() is a suitable choice. This is particularly useful for values that don’t affect the visual presentation of your component.

import React, { useRef } from 'react';

function Timer() {
  const intervalId = useRef(null);

  const startTimer = () => {
    intervalId.current = setInterval(() => {
      // Perform timer-related logic
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(intervalId.current);
  };

  return (
    <div>
      <button onClick={startTimer}>Start Timer</button>
      <button onClick={stopTimer}>Stop Timer</button>
    </div>
  );
}

In this example, intervalId is maintained across renders and allows the timer to start and stop without causing re-renders.

2. Storing Previous Values

When you need to store the previous value of a variable between renders, useRef() is a valuable tool. This can be useful for comparing the current and previous values to determine if an action should be taken.

import React, { useState, useEffect, useRef } from 'react';

function DynamicComponent() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  const didCountChange = count !== prevCountRef.current;

  return (
    <div>
      <p>Current Count: {count}</p>
      <p>Count Changed: {didCountChange ? 'Yes' : 'No'}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
    </div>
  );
}

Here, prevCountRef stores the previous value of count, allowing us to compare it in the subsequent render.

3. Referencing DOM Elements

When you need to interact with or manipulate DOM elements directly, useRef() is the appropriate choice. It provides a way to reference DOM nodes without causing unnecessary re-renders.

import React, { useRef, useEffect } from 'react';

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

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
}

In this example, the input field is focused as soon as the component mounts, thanks to useRef().

Additional Use Cases for useRef()

Beyond the scenarios we’ve explored, there are several more situations where useRef() can prove to be a valuable tool in your React applications.

4. Handling Animations

When working with animations, you might need to access the DOM element to control its animations directly. useRef() allows you to reference the element and perform animations without triggering re-renders.

import React, { useRef, useEffect } from 'react';

function AnimationComponent() {
  const elementRef = useRef();

  useEffect(() => {
    // Perform animation-related logic using the referenced DOM element
  }, []);

  return <div ref={elementRef}>Animated Element</div>;
}

5. Avoiding Repeated Event Listeners

In scenarios where you want to attach event listeners to DOM elements, useRef() can help prevent attaching multiple listeners during re-renders.

import React, { useRef, useEffect } from 'react';

function ClickCounter() {
  const clickCountRef = useRef(0);

  const handleClick = () => {
    clickCountRef.current += 1;
    console.log(`Click count: ${clickCountRef.current}`);
  };

  useEffect(() => {
    const button = document.querySelector('#click-button');
    button.addEventListener('click', handleClick);

    return () => {
      button.removeEventListener('click', handleClick);
    };
  }, []);

  return <button id="click-button">Click Me</button>;
}

6. Capturing Previous Props or State

In certain cases, you might want to compare previous props or state to their current values. useRef() can help you achieve this comparison across renders.

import React, { useState, useEffect, useRef } from 'react';

function DynamicComparison() {
  const [value, setValue] = useState(0);
  const prevValueRef = useRef();

  useEffect(() => {
    prevValueRef.current = value;
  }, [value]);

  const isValueIncreasing = value > prevValueRef.current;

  return (
    <div>
      <p>Current Value: {value}</p>
      <p>Value is Increasing: {isValueIncreasing ? 'Yes' : 'No'}</p>
      <button onClick={() => setValue(value + 1)}>Increment Value</button>
    </div>
  );
}

Final Thoughts

While useState() is a powerful tool for managing dynamic state in React components, useRef() serves a distinct purpose of preserving values and referencing DOM elements. By recognizing the scenarios where useRef() is a better fit, you can write more efficient and optimized React code. Whether you’re working with animations, event listeners, or need to compare values across renders, useRef() empowers you to achieve your goals while maintaining a responsive and performant user interface. By mastering both useState() and useRef(), you’ll have a comprehensive toolkit to tackle a wide range of challenges in your React projects. Happy coding and hooking with React!