Deep Analysis and Implementation of Comparing Old and New Values in React Hooks useEffect

Introduction

In React functional components, the useEffect hook is a core tool for handling side effects. However, unlike componentDidUpdate in class components, useEffect does not provide direct access to previous values by default. This becomes particularly challenging when dealing with multiple interdependent state variables, such as in currency conversion scenarios where values need to be updated based on specific rules.

Problem Background and Challenges

Consider a component with three input fields: rate (exchange rate), sendAmount (amount to send), and receiveAmount (amount to receive). The business logic requires:

• When sendAmount changes, calculate receiveAmount = sendAmount * rate.
• When receiveAmount changes, calculate sendAmount = receiveAmount / rate.
• When rate changes, recalculate the corresponding value based on whether sendAmount or receiveAmount is greater than zero.

Using multiple useEffect hooks directly can lead to repeated calculations or infinite loops, especially when changes trigger network requests. Thus, a mechanism is needed to compare old and new values, ensuring operations are performed only when necessary.

Implementation of the Custom usePrevious Hook

React documentation recommends using useRef to store previous values, as modifying a ref does not trigger component re-renders. Based on this, we can implement a custom usePrevious hook:

import { useEffect, useRef } from "react";

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

This hook updates the ref's current value after each render, but since useEffect runs after rendering, it always returns the value from the previous render, effectively storing the old value.

Applying usePrevious in useEffect

In the component, we can use usePrevious to compare state changes:

const Component = (props) => {
  const { rate, sendAmount, receiveAmount } = props;
  const prevValues = usePrevious({ rate, sendAmount, receiveAmount });

  useEffect(() => {
    if (prevValues && prevValues.sendAmount !== sendAmount) {
      // Handle sendAmount change
      const newReceiveAmount = sendAmount * rate;
      // Update state or perform other operations
    }
    if (prevValues && prevValues.receiveAmount !== receiveAmount) {
      // Handle receiveAmount change
      const newSendAmount = receiveAmount / rate;
      // Update state or perform other operations
    }
    if (prevValues && prevValues.rate !== rate) {
      // Handle rate change
      if (sendAmount > 0) {
        const newReceiveAmount = sendAmount * rate;
        // Update receiveAmount
      } else if (receiveAmount > 0) {
        const newSendAmount = receiveAmount / rate;
        // Update sendAmount
      }
    }
  }, [rate, sendAmount, receiveAmount]);

  return (
    <div>
      {/* Render input fields */}
    </div>
  );
};

This approach consolidates all dependencies into a single useEffect, avoiding repeated executions that can occur with multiple effects by comparing old and new values.

Performance Optimization and Best Practices

While a single useEffect can simplify logic, using multiple useEffect hooks might be clearer in some cases. For instance, if the logic triggered by each state change is independent and without cross-dependencies, separate handling can improve code readability.

Additionally, introducing auxiliary states like changeCount can further optimize performance, such as tracking local changes to avoid unnecessary network requests. In real-world projects, the most suitable approach should be selected based on specific requirements.

TypeScript Version Extension

For TypeScript users, the usePrevious hook can be enhanced for type safety:

import { useEffect, useRef } from "react";

const usePrevious = <T>(value: T): T | undefined => {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

This ensures proper type inference with generics, preventing runtime type errors.

Conclusion

By customizing the usePrevious hook, we can effectively compare old and new values in React Hooks, addressing update issues with multiple dependent states. This method not only enhances code maintainability but also avoids common pitfalls like infinite loops. Developers should flexibly choose implementation strategies based on component complexity and performance needs, and leverage tools like TypeScript to improve code reliability.