Understanding the useRef Hook in React

Introduction

In React, managing references to DOM elements or values that persist across renders is crucial for various scenarios. The useRef hook provides a way to create mutable references that persist throughout the component’s lifecycle. In this article, we’ll explore the useRef hook, its usage, and when it’s appropriate to employ it.

What is the useRef Hook?

The useRef hook in React allows us to create a mutable reference that persists across renders without causing re-renders. Unlike state variables, changes to useRef values do not trigger component re-renders.

Avoiding Unnecessary Re-Renders

Since useRef doesn’t trigger re-renders, it’s not recommended to use it within the return area of components. In such cases, updates to the useRef value won’t reflect in the rendered output because the component doesn’t re-render. Instead, useRef is better suited for scenarios where we don’t want the page to re-render upon updates.

Ideal Use Cases for useRef

One of the primary use cases for useRef is for DOM manipulation. It serves as a convenient alternative to traditional DOM manipulation methods like getElementById, className, or querySelector. By using useRef, we can directly access and manipulate DOM elements without triggering React's virtual DOM updates. This bypasses the reconciliation process and offers a more efficient approach to DOM manipulation.

import { useState } from "react";
import "./App.css";
import { useRef } from "react";
import { useEffect } from "react";

function App() {
  const [input, setInput] = useState("");

  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus()
    inputRef.current.style.height = "30px"
    inputRef.current.style.width = "300px"
    inputRef.current.style.paddingLeft = "10px"
    inputRef.current.style.outline = "none"
  }, [])


  const inputHandler = (e) => {
    const value = e.target.value;

    setInput(value);

    if (parseInt(value)) {
      inputRef.current.style.border = value % 2 === 0 ? "2px solid yellow" : "2px solid green"
    } else {
      inputRef.current.style.border = "2px solid red"
    }
  };

  return (
    <>
      <input
        type="text"
        value={input}
        ref={inputRef}
        placeholder="Enter only the digits"
        onChange={inputHandler}
      />
    </>
  );
}

export default App;

Other Scenarios

Besides DOM manipulation, useRef can be useful for storing values or performing calculations that don’t require re-rendering the component. For instance, it can be used to store previous state values for comparison or to maintain references to elements or data that need to persist across renders.

Conclusion

The useRef hook in React provides a powerful mechanism for managing mutable references without causing re-renders. While it’s essential to understand its limitations, such as not triggering re-renders, useRef offers valuable solutions for scenarios like DOM manipulation and maintaining persistent references. By leveraging the useRef hook effectively, developers can enhance the performance and efficiency of their React applications.