ReactJS - Using useRef: A Beginner's Guide

Hello there, future React developers! Today, we're going to embark on an exciting journey into the world of React hooks, specifically the useRef hook. Don't worry if you're new to programming – I'll be your friendly guide, explaining everything step by step. So, grab a cup of coffee (or tea, if that's your thing), and let's dive in!

What is useRef?

Before we start coding, let's understand what useRef is all about. Imagine you have a magical box that can hold any value you want, and this box doesn't change even when your component re-renders. That's essentially what useRef does for us in React!

useRef is a hook that provides a way to create a mutable reference that persists across component re-renders. It's like having a secret compartment in your component where you can store information without triggering a re-render when that information changes.

Signature of the useRef hook

Let's take a look at how we use the useRef hook:

const refContainer = useRef(initialValue);

Here, initialValue is the value you want to start with, and refContainer is an object with a single property called current. This current property holds the actual value you're referencing.

Think of it like a special box with a label on it saying "current". Whatever you put inside this box becomes the value of current.

Applying ref hook

Now, let's see how we can use useRef in a real-world scenario. Imagine we want to create a simple text input that, when clicked, automatically focuses and allows the user to start typing.

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

function AutoFocusInput() {
  const inputRef = useRef(null);

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

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

Let's break this down:

1. We import useRef along with useEffect from React.
2. We create a ref called inputRef using useRef(null).
3. We use the useEffect hook to focus on the input when the component mounts.
4. In the JSX, we attach our ref to the input element using the ref attribute.

When this component renders, the input will automatically receive focus. It's like magic, isn't it? But it's not magic – it's the power of useRef!

Use cases of useRef

Now that we've seen a basic example, let's explore some more use cases for useRef. Trust me, this hook is more versatile than a Swiss Army knife!

1. Storing Previous Values

Sometimes, you might want to keep track of a value from the previous render. useRef is perfect for this!

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

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

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

  return (
    <div>
      <p>Current count: {count}</p>
      <p>Previous count: {prevCountRef.current}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In this example, we're using useRef to store the previous value of our count. Every time the count changes, we update our ref in the useEffect hook. This way, we always have access to both the current and previous count.

2. Accessing DOM Elements

useRef is also great for directly accessing DOM elements. Let's create a video player component as an example:

import React, { useRef } from 'react';

function VideoPlayer() {
  const videoRef = useRef(null);

  const playVideo = () => {
    videoRef.current.play();
  };

  const pauseVideo = () => {
    videoRef.current.pause();
  };

  return (
    <div>
      <video ref={videoRef} src="path/to/your/video.mp4" />
      <button onClick={playVideo}>Play</button>
      <button onClick={pauseVideo}>Pause</button>
    </div>
  );
}

Here, we're using useRef to get a reference to the video element. This allows us to call methods like play() and pause() directly on the video element when the buttons are clicked.

3. Preserving Values Between Renders

useRef is also useful when you need to preserve a value between renders without causing a re-render. Let's look at an example:

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

function IntervalCounter() {
  const [count, setCount] = useState(0);
  const intervalRef = useRef();

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalRef.current);
  }, []);

  return <div>Count: {count}</div>;
}

In this example, we're using useRef to store the interval ID returned by setInterval. This allows us to clear the interval in the cleanup function of our useEffect hook, preventing memory leaks.

Wrapping Up

And there you have it, folks! We've journeyed through the land of useRef, exploring its signature, how to apply it, and some common use cases. Remember, useRef is like a trusty sidekick in your React adventures – always there when you need to keep track of something without triggering a re-render.

Here's a quick recap of the methods we've covered:

Method	Description
useRef(initialValue)	Creates a ref object with the provided initial value
ref.current	Accesses or modifies the current value of the ref
<element ref={refObject}>	Attaches a ref to a DOM element

As you continue your React journey, you'll find many more creative ways to use useRef. It's a powerful tool that, when used correctly, can solve many tricky problems in React development.

Remember, the key to mastering React (or any programming concept) is practice. So go ahead, try out these examples, experiment with your own ideas, and don't be afraid to make mistakes. That's how we all learn and grow as developers.

Happy coding, and may the refs be with you!

Credits: Image by storyset