Get previous value from last render in React - useRef

In todays tutorial, we will show how to retrieve the last value from a previous render or state update. We will solve it by using the built in hook useRef. In order to share the functionality, we will create our own custom hook called usePrevious.

Problem statement

In this example, we will create a component that are calling our Website scraping API and we will make sure it is only called when our state has changed, to make sure there are not too many unnecessary requests and we will also print our current website that we are crawling, as well as our previous website.

Custom hook

We will start by creating our custom hook. Create a filed called usePrevious.tsx or .jsx if you are not using TypeScript.

Set up TypeScript in your React application like this if you are interested.

import { useEffect, useRef } from "react";

export const usePrevious = (value: string) => {
  const ref = useRef<string>();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

So what is going on here?

• First we are using useRef that will hold our value.
• Then for every render, our currenct value will be updated with the last value.
• The hook will return the previous value for the components to use

Consume our hook

Let's create a component that will accept a url as a prop, and that will call our API. Our component will only call the API if the prop has changed, and we will also print both values.

import { useEffect } from "react";
import { usePrevious } from "./hooks/usePrevious";

interface IComponent {
  url: string;
}

export const MyComponent = (props: IComponent) => {
  const previous = usePrevious(props.url);

  useEffect(() => {
    if (previous !== props.url) {
      fetch(`https://media.algobook.info/scrape?url=${props.url}`);
    }
  });

  return (
    <div>
      {`Last scrape was: ${previous}`}
      {`Scraping: ${props.url} now`}
    </div>
  );
};

So, in above component we are using the usePrevious custom hook, and we are providing it with our url that is passed in. And in our useEffect hook, we will check that they are different to not fire unnecessary requests. And then we are printing the last crawled website (will be undefined the first time) and then the current website that are being crawled.

Consume it

And to consume the component, we will do something like this:

const [url, setUrl] = useState < string > "https://example.com";

return (
  <div>
    <button onClick={() => setUrl("https://google.com")}>Crawl google</button>
    <button onClick={() => setUrl("https://algobook.info")}>
      Crawl Algobook
    </button>
    <button onClick={() => setUrl("https://example.com")}>
      Crawl example.com
    </button>
    <MyComponent url={url} />
  </div>
);

And now we will toggle between three websites by clicking on the respective buttons.

Outro

In this article we presented a solution on how we can retrieve a previous value from the last render using useRef hook. We also built our own hook in order to make the code shareable accross our project. I hope you enjoyed this guide, and that it helped you out!

All the best,