Supercharging your React Components with the usePrevious Hooks

The usePrevious hook is a custom hook in React that allows you to access the previous value of a state or prop in your functional components. This hook is not built into React, but it can be easily created using other built-in hooks like useRef and useEffect.

The usePrevious hook can be particularly useful when you need to compare the current value of a state or prop with its previous value. This is a common requirement in many real-world applications. For example, you might want to perform a certain action when a state changes from one specific value to another.

‍

Understanding the Concept of usePrevious Hook

To understand the usePrevious hook, it's important to first understand how state and props work in React. In a React component, state and props are always current. This means that within the render method of a component, you can only access the current state and props.

However, there are situations where you might need to access the previous state or props. This is where the usePrevious hook comes in. The usePrevious hook allows you to store the previous value of a state or prop in a ref, and then access this value in your component.

‍

The Importance of usePrevious Hook in React

In React, the state of a component is always current. This means that whenever the state changes, the component re-renders with the new state. However, there are situations where you might need to compare the current state with the previous state. For example, you might want to perform a certain action when a state changes from one specific value to another.

The usePrevious hook allows you to do this. By using the usePrevious hook, you can store the previous state in a ref, and then access this state in your component. This can be particularly useful in situations where you need to compare the current state with the previous state.

‍

The Difference Between usePrevious Hook and Other Hooks

The usePrevious hook is a custom hook, which means it's not built into React like the useState or useEffect hooks. However, it's built using these built-in hooks.

The main difference between the usePrevious hook and other hooks is that the usePrevious hook allows you to access the previous value of a state or prop. Other hooks, like useState and useEffect, only allow you to access the current value of a state or prop.

The usePrevious hook is also different from other hooks in that it doesn't cause a re-render when it's used. This is because it uses the useRef hook to store the previous value, and the useRef hook doesn't trigger a re-render when its value changes.

‍

How to Create a usePrevious Hook

Creating a usePrevious hook in React is quite straightforward. The hook is built using the useRef and useEffect hooks. Here's a simple implementation of the usePrevious hook:

1     function usePrevious(value) {
2      const ref = useRef();
3      useEffect(() => {
4        ref.current = value;
5      });
6      return ref.current;
7    }
8     

In this code, the usePrevious function takes a value as an argument, which is the current value of a state or prop. The function then creates a ref using the useRef hook, and stores the current value in this ref in the useEffect hook. The function finally returns the ref.current, which is the previous value of the value.

‍

Practical Example of usePrevious Hook in a Counter Component

To illustrate how the usePrevious hook works, let's look at a practical example. Suppose we have a counter component, and we want to log the previous count every time the count changes.

Here's how we can do this using the usePrevious hook:

1     function Counter() {
2      const [count, setCount] = useState(0);
3      const previousCount = usePrevious(count);
4    
5      useEffect(() => {
6        if (previousCount !== undefined) {
7          console.log(`Previous count: ${previousCount}`);
8        }
9      }, [count]);
10    
11      return (
12        <div>
13          <p>Count: {count}</p>
14          <button onClick={() => setCount(count + 1)}>Increment</button>
15        </div>
16      );
17    }
18     

In this code, we first create a state for the count using the useState hook. We then use the usePrevious hook to get the previous count. In the useEffect hook, we log the previous count every time the count changes.

‍

Understanding the Initial Value in usePrevious Hook

The initial value in the usePrevious hook is the value that the hook returns on the initial render of the component. Since the usePrevious hook is designed to return the previous value of a state or prop, it doesn't have a previous value on the initial render. Therefore, on the initial render, the usePrevious hook returns undefined.

This is why in the above example, we check if the previousCount is not undefined before logging it. This ensures that we don't log the previousCount on the initial render, when it's undefined.

‍

The Role of Const Ref in usePrevious Hook

In the usePrevious hook, we use the const ref to store the previous value of a state or prop. The ref is created using the useRef hook, which returns a mutable ref object. This object has a current property, which is initialized to the argument passed to useRef (which is undefined by default), and can be changed freely.

The reason we use a ref to store the previous value is that a ref doesn't trigger a re-render when its value changes. This is unlike state variables, which do trigger a re-render when their value changes. Since we don't want to trigger a re-render when the previous value changes, a ref is the perfect tool for the job.

‍

How usePrevious Hook Works with Previous State and Current Value

The usePrevious hook works by storing the previous state in a ref and then returning this previous state when the hook is called. This allows you to compare the current state with the previous state in your component.

Here's how it works in detail:

1. When the usePrevious hook is called, it creates a ref using the useRef hook.
2. In the useEffect hook, it sets the ref.current to the current value. This happens after the render, so the ref.current now holds the previous value.
3. The usePrevious hook then returns the ref.current, which is the previous value.

This process repeats every time the component re-renders, allowing you to always access the previous state in your component.

‍

The Functionality of usePrevious Hook in Class Components

While the usePrevious hook is designed for functional components, you can achieve similar functionality in class components using lifecycle methods.

In class components, you can store the previous state in an instance variable and update this variable in the componentDidUpdate lifecycle method. Here's an example:

1     class Counter extends React.Component {
2      constructor(props) {
3        super(props);
4        this.state = { count: 0 };
5        this.previousCount = null;
6      }
7    
8      componentDidUpdate(prevProps, prevState) {
9        this.previousCount = prevState.count;
10      }
11    
12      increment = () => {
13        this.setState({ count: this.state.count + 1 });
14      };
15    
16      render() {
17        return (
18          <div>
19            <p>Count: {this.state.count}</p>
20            <p>Previous count: {this.previousCount}</p>
21            <button onClick={this.increment}>Increment</button>
22          </div>
23        );
24      }
25    }
26     

In this code, we store the previous count in the previousCount instance variable and update it in the componentDidUpdate method. This allows us to access the previous count in the render method.

‍

‍

The Role of usePrevious Hook in the Re-rendering Process

The usePrevious hook plays a crucial role in the re-rendering process in React. It allows you to access the previous state or props, which can be useful when you need to perform an action based on how the state or props have changed.

When a state or prop changes, the component re-renders with the new state or props. However, the usePrevious hook allows you to store the previous state or props in a ref, and then access this ref in the new render.

This can be particularly useful in situations where you need to compare the current state or props with the previous state or props. For example, you might want to perform a certain action when a state changes from one specific value to another. The usePrevious hook allows you to do this.

‍

How to Use usePrevious Hook with useEffect Hook

The useEffect hook is often used in conjunction with the usePrevious hook. The useEffect hook allows you to perform side effects in your component, such as fetching data, setting up a subscription, or manually changing the DOM.

You can use the usePrevious hook inside a useEffect hook to access the previous state or props. This can be useful when you need to perform an action based on how the state or props have changed.

Here's an example:

1     function Counter() {
2      const [count, setCount] = useState(0);
3      const previousCount = usePrevious(count);
4    
5      useEffect(() => {
6        if (previousCount !== undefined && count > previousCount) {
7          console.log('Count has increased');
8        }
9      }, [count]);
10    
11      return (
12        <div>
13          <p>Count: {count}</p>
14          <button onClick={() => setCount(count + 1)}>Increment</button>
15        </div>
16      );
17    }
18     

In this code, we use the usePrevious hook to get the previous count. We then use the useEffect hook to log a message every time the count increases. The useEffect hook depends on the count, so it runs every time the count changes.

‍

Common Pitfalls and Solutions when Using usePrevious Hook

While the usePrevious hook is powerful, it's important to be aware of some common pitfalls when using it.

One common pitfall is forgetting that the usePrevious hook returns undefined on the initial render. This is because there's no previous value on the initial render. To avoid issues, always check if the return value of the usePrevious hook is undefined before using it.

Another common pitfall is using the usePrevious hook with a state or prop that changes frequently. Since the usePrevious hook stores the previous value in a ref, it can cause memory issues if the state or prop changes too frequently. To avoid this, only use the usePrevious hook with states or props that don't change too frequently.

Finally, remember that the usePrevious hook doesn't trigger a re-render when the previous value changes. This is because it uses a ref to store the previous value, and a ref doesn't trigger a re-render when its value changes. If you need to trigger a re-render when the previous value changes, consider using a state variable instead of the usePrevious hook.

‍

Conclusion

The usePrevious hook is a powerful tool in the React developer's arsenal. It allows you to access the previous state or props in your functional components, which can be useful in many real-world scenarios.

While the usePrevious hook is not built into React, it can be easily created using the useRef and useEffect hooks. The hook works by storing the previous value in a ref, and then returning this ref when the hook is called.

However, it's important to be aware of some common pitfalls when using the usePrevious hook. Always check if the return value of the hook is undefined before using it, and avoid using the hook with states or props that change too frequently. Also, remember that the usePrevious hook doesn't trigger a re-render when the previous value changes.

By understanding how the usePrevious hook works and how to use it effectively, you can write cleaner and more efficient React code. So, next time you need to access the previous state or props in your component, consider using the usePrevious hook.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.