React useRef() Hook

useRef() is one of the React Hooks introduced in React 16.8. It allows you to create a mutable reference to a DOM element or a value that persists across renders without triggering a re-render. It is useful for accessing or manipulating DOM elements directly, managing focus, or storing any mutable value that needs to persist between renders.

Get King Cosmos’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The syntax to use useRef() is simple:

import React, { useRef } from 'react';

const MyComponent = () => {
  // Create a ref using useRef()
  const myRef = useRef(initialValue);

  // ...
};

Here are the main use cases and features of useRef():

1. Accessing DOM Elements: You can use useRef() to get direct access to a DOM element. Once you have the reference, you can interact with it without using any traditional DOM manipulation methods like getElementById.

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

const MyComponent = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    // Focus on the input element when the component mounts
    inputRef.current.focus();
  }, []);

  return (
    <div>
      <input type="text" ref={inputRef} />
    </div>
  );
};

Holding Persistent Values: Unlike state variables, the value stored in a useRef() persists across renders but doesn't trigger re-renders when it changes. This makes it suitable for maintaining mutable data without affecting the component's rendering.

import React, { useRef } from 'react';

const MyComponent = () => {
  const counterRef = useRef(0);
  // ...

  const incrementCounter = () => {
    counterRef.current += 1;
    console.log('Current value:', counterRef.current);
  };

  return (
    <div>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
};

Keeping Previous Values: Since useRef() retains its value across renders, you can use it to keep track of previous values and compare them with the current ones.

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

const MyComponent = () => {
  const prevValueRef = useRef(null);
  const value = 10;

  useEffect(() => {
    console.log('Current value:', value);
    console.log('Previous value:', prevValueRef.current);
    prevValueRef.current = value;
  }, [value]);

  return <div>Check the console log for value changes</div>;
};

Remember that when you modify the .current property of a useRef() object, React doesn't trigger a re-render of the component, making it an excellent choice for holding values that should not affect rendering.

In summary, useRef() is a powerful React Hook that allows you to hold mutable references to DOM elements or values that persist across renders without causing re-renders. This can be useful for various use cases, such as accessing and manipulating DOM elements directly or managing stateful data that doesn't need to trigger component re-renders.