DEV Community

Elizabeth
Elizabeth

Posted on

9 2

Understanding useRef in react

In my previous post, we talked about useMemo, when we should use it and why we shouldn't overuse it. In this post, we will be looking at the useRef hook and the common use-cases. Let get into it right away.

What is the useRef hook

According to the React documentation,

useRef returns a mutable ref object whose current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
In short, useRef is kinda similar to the useState hook, except it returns a mutable object and doesn't cause a component to re-render.

To use the value returned from useRef you need to call the current value. i.e

const ref = useRef('Dami')
console.log(ref.current);
// Dami
Enter fullscreen mode Exit fullscreen mode

useRef use cases.

One of the common useCase for useRef is to use it as a reference to a dom element. Every JavaScript DOM element has a ref attribute and you can use the useRef hook to get access to that element. eg.

import "./styles.css";
import React, { useRef, useState } from "react";

export default function App() {
  const [name, setName] = useState();
  const [message, setMessage] = useState();
  const inputRef = useRef();

  const lettersOnly = /^[A-Za-z]+$/;

  const testLetters = () => {
    if (name.match(lettersOnly)) {
      setMessage("Success");
    } else {
      inputRef.current.focus();
      setMessage("Please do not enter a number");
    }
  };
  return (
    <div className="App">
      <input
        ref={inputRef}
        placeholder="Do not enter a number"
        onChange={(e) => setName(e.target.value)}
      />
      <button onClick={testLetters}>Check</button>

      <div>
        <small>{message}</small>
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

In the code above we're using the useRef hook to focus on the input field when a user enters a number into the box.

You'll notice that I am still using useState to hold the value of the content. You would actually want to do this, it is generally a good idea to let react handle your input value in a state instead of using javascript DOM, if not, why else are you using react anyways?

Another common use case for useRef is to know the number of times a component rerenders. Because the useRef hook actually doesn't cause the component to rerender, you can actually use it to target the number of rerenders.

import React, { useRef, useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [number, setNumber] = useState();
  const rendered = useRef(0);

  useEffect(() => {
    rendered.current = rendered.current + 1;
  });
  return (
    <div className="App">
      <input value={number} onChange={(e) => setNumber(e.target.value)} />
      <div>I rendered {rendered.current} times</div>
    </div>
  );
}

Enter fullscreen mode Exit fullscreen mode

Conclusion

The useRef hook is one of those hooks that I rarely use but there's more to using useRef.

I hope this was able to add some clarification to the useRef hook. If you have any questions, comments, or suggestions please send them in the comment below. In my next post, we'll be looking into the useCallback hook. Meanwhile, stay safe and keep doing amazing things.

Image of Bright Data

Cut Costs, Save Time – Get your datasets ready for action faster than ever.

Save on resources with our ready-to-use datasets designed for quick integration and application.

Reduce Costs

Top comments (2)

Collapse
 
heymich profile image
Michael Hungbo

Thanks Eli for the detailed and simple article!

Collapse
 
ilizette profile image
Elizabeth

Thank you so much for reading

Image of Bright Data

Maintain Seamless Data Collection – No more rotating IPs or server bans.

Avoid detection with our dynamic IP solutions. Perfect for continuous data scraping without interruptions.

Avoid Detection

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay