Implement usePrevious Hook in React [Interview]

While developing react applications, sometimes you need to keep track of the previous value of a state or a prop to perform certain actions or comparisons.

The usePrevious custom hook in React allows you to store the previous value of a state or a prop to be accessed in subsequent renders.

React does not provide a built-in way to track the previous value, so this hook is extremely useful in real-world apps and comes up often in interviews.

Implementation of usePrevious Hook

Let's create the usePrevious custom hook in React

import { useRef, useEffect } from 'react';

const usePrevious = (value) => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
};

export default usePrevious;

Usage of usePrevious Hook

Now, let's see how to use the usePrevious hook in a React functional component

import React, { useState } from 'react';
import usePrevious from './usePrevious';

const ExampleComponent = () => {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

  return (
    <div>
      <p>Current count: {count}</p>
      <p>Previous count: {prevCount !== undefined ? prevCount : 'N/A'}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
    </div>
  );
};

export default ExampleComponent;

Explanation

In the above example, the usePrevious hook is used to keep track of the previous value of the count state. The hook returns the previous value of the count state, which is then displayed in the component.

Use-cases for usePrevious hook

usePrevious is useful when you need to:

1. Compare previous and current values: Useful for triggering some action only when a value changes.
2. Animate on value change: Animate a number counter when the value updates.
3. Track prop or state differences: Sometimes you want to know how a prop changed across renders.
4. Debug unexpected re-renders: Because the previous value is undefined on the first render, it works like a built-in check.

Learn Next 🚀

1. Top 20 Most Asked Custom Hooks in React (Interview)
2. Best Resources to Ace React Interviews