Advanced React Hooks: Accessing Previous State and Props

Understanding how to access previous state and props in React is crucial for building complex and efficient applications. In this blog, we will explore advanced techniques using React Hooks to access and utilize previous state and props, enabling you to create more dynamic and responsive components.

Introduction

React Hooks provide a powerful way to manage state and side effects in functional components. However, accessing previous state or props isn't straightforward as it is with class components. In this guide, we’ll use useRef and useEffect to access previous values, allowing for more complex interactions within your components.

Setting Up the Project

First, let’s set up a new React project. If you don’t already have a React project, you can create one using Create React App.

npx create-react-app advanced-hooks
cd advanced-hooks
npm start

This will create a new React application and start the development server.

Understanding the Problem

In class components, accessing previous state or props is straightforward using lifecycle methods like componentDidUpdate. However, with functional components and Hooks, there is no direct equivalent. We need to use a combination of useRef and useEffect to mimic this behavior.

Using useRef to Access Previous State

The useRef Hook can store a mutable object that persists across renders. We can leverage this to store previous state values.

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

const PreviousStateExample = () => {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

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

  const prevCount = prevCountRef.current;

  return (
    <div>
      <h1>Current Count: {count}</h1>
      <h2>Previous Count: {prevCount}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default PreviousStateExample;

In this example, useRef is used to store the previous count. The useEffect Hook updates the reference after each render.

Using useEffect for Previous Props

To track previous props, we follow a similar approach. The useEffect Hook allows us to perform side effects after a render, making it suitable for updating a reference to store previous props.

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

const PreviousPropsExample = ({ name }) => {
  const prevNameRef = useRef();

  useEffect(() => {
    prevNameRef.current = name;
  }, [name]);

  const prevName = prevNameRef.current;

  return (
    <div>
      <h1>Current Name: {name}</h1>
      <h2>Previous Name: {prevName}</h2>
    </div>
  );
};

export default PreviousPropsExample;

In this example, prevNameRef is updated with the current name prop after each render, allowing us to access the previous name.

Combining useRef and useEffect

Combining useRef and useEffect allows us to track multiple previous values in a component. This is especially useful in more complex scenarios.

Practical Example: Form Validation

Let’s build a practical example: a form with validation that tracks previous input values and validation states.

Create a new file named FormValidationExample.js in the src directory.

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

const FormValidationExample = () => {
  const [email, setEmail] = useState('');
  const [isValid, setIsValid] = useState(true);
  const prevEmailRef = useRef();
  const prevIsValidRef = useRef();

  useEffect(() => {
    prevEmailRef.current = email;
    prevIsValidRef.current = isValid;
  }, [email, isValid]);

  const validateEmail = (email) => {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(String(email).toLowerCase());
  };

  const handleChange = (e) => {
    setEmail(e.target.value);
    setIsValid(validateEmail(e.target.value));
  };

  const prevEmail = prevEmailRef.current;
  const prevIsValid = prevIsValidRef.current;

  return (
    <div>
      <form>
        <label>
          Email:
          <input type="email" value={email} onChange={handleChange} />
        </label>
        {!isValid && <p style={{ color: 'red' }}>Invalid email address</p>}
      </form>
      <div>
        <h2>Previous Email: {prevEmail}</h2>
        <h2>Previous Validation State: {prevIsValid ? 'Valid' : 'Invalid'}</h2>
      </div>
    </div>
  );
};

export default FormValidationExample;

Conclusion

In this blog, we explored advanced techniques for accessing previous state and props in React using Hooks. By leveraging useRef and useEffect, we can create more dynamic and responsive components. These techniques are powerful tools for managing complex state interactions and improving the user experience in your React applications.