What is Useref & How to Use It

In the world of React, hooks have revolutionized the way we manage state and side effects. One of the lesser-known but incredibly useful hooks is useRef. useRef allows you to create a mutable reference to a DOM element or any other value that persists across renders. In this blog post, we'll delve into what useRef is, how to use it, and explore various applications where it can prove to be a powerful tool.

Understanding useRef

useRef is a Hook provided by React, and it is commonly used for accessing and interacting with DOM elements. It can also be used for preserving values between renders without causing re-renders.

Here's a basic example of how to use useRef:

import React, { useRef, useEffect } from 'react';
function MyComponent() {
  const myRef = useRef();
  useEffect(() => {
    myRef.current.focus();
  }, []);
  return (
    <input ref={myRef} />
  );
}

In the code above, we create a myRef using the useRef hook and assign it to the input element using the ref prop. We use the useEffect hook to focus on the input element when the component mounts. This is a common use case for useRef when dealing with DOM elements.

Applications of useRef

1. Managing Focus and Text Selection

As shown in the example above, you can use useRef to manage focus on input fields or control text selection. It can be handy for creating smooth user experiences in forms or input fields, especially when combined with other hooks like useEffect.

2. Triggering Imperative Animations

useRef can be used to trigger imperative animations or interactions. For example, you might want to programmatically play or pause a video, show/hide a modal, or slide a drawer in and out. By creating a reference to the DOM element, you can control these interactions directly without having to rely on state changes.

import React, { useRef } from 'react';
function VideoPlayer() {
  const videoRef = useRef();
  const playVideo = () => {
    videoRef.current.play();
  }
  const pauseVideo = () => {
    videoRef.current.pause();
  }
  return (
    <div>
      <video ref={videoRef} src="my-video.mp4"></video>
      <button onClick={playVideo}>Play</button>
      <button onClick={pauseVideo}>Pause</button>
    </div>
  );
}

3. Storing Previous Values

In some situations, you may want to compare the current value of a prop or state with its previous value. This can be helpful when you need to perform some action based on a change in value, such as triggering a network request when a specific piece of data changes. You can achieve this using useRef.

import React, { useState, useEffect, useRef } from 'react';
function DataComponent({ data }) {
  const prevDataRef = useRef();
  useEffect(() => {
    if (prevDataRef.current !== data) {
      // Data has changed, perform an action
      console.log('Data has changed:', data);
    }
    // Update the ref with the current data for the next comparison
    prevDataRef.current = data;
  }, [data]);
  return <div>{data}</div>;
}

In this example, we use prevDataRef to store the previous value of the data prop and compare it in the useEffect to detect changes.

4. Custom Caching

You can create custom caching mechanisms using useRef. For instance, if you have a computationally expensive function that returns the same result for the same input, you can cache the results to avoid recalculating them on every render.

import React, { useRef } from 'react';
function ExpensiveCalculation() {
  const resultCache = useRef({});
  const calculate = (input) => {
    if (!resultCache.current[input]) {
      // Perform the expensive calculation
      resultCache.current[input] = /* result */;
    }
    return resultCache.current[input];
  }
  return <div>{calculate(someInput)}</div>;
}

By storing the calculated results in resultCache, you prevent redundant computations and improve performance.

Conclusion

useRef is a versatile hook in React that offers a wide range of applications beyond just interacting with the DOM. You can use it to manage focus, trigger animations, compare previous values, or even create custom caching mechanisms. It's a valuable tool in your React toolkit for solving a variety of problems efficiently.

In this blog, we explored the useRef hook, providing code examples and highlighting its different use cases. With the knowledge of how useRef works and where it can be applied, you can take your React applications to the next level by harnessing its power to create more interactive and efficient user interfaces.