Avoiding Infinite Loops in componentDidUpdate with setState

The componentDidUpdate lifecycle method is prone to infinite loops if you unconditionally call setState. Here’s how to handle it properly:

The Problem: Infinite Loop

componentDidUpdate(prevProps, prevState) {
  // ❌ Dangerous - may cause infinite loop
  if (this.props.someValue !== prevProps.someValue) {
    this.setState({ derivedValue: this.props.someValue * 2 });
  }
}

Even with a condition, you can still create loops if not careful.

Safe Patterns

1. Add Additional Guard Conditions

componentDidUpdate(prevProps, prevState) {
  // ✅ Safe with multiple conditions
  if (this.props.someValue !== prevProps.someValue && 
      this.state.derivedValue !== this.props.someValue * 2) {
    this.setState({ derivedValue: this.props.someValue * 2 });
  }
}

2. Consider Using getDerivedStateFromProps Instead

static getDerivedStateFromProps(props, state) {
  if (props.someValue !== state.lastPropValue) {
    return {
      derivedValue: props.someValue * 2,
      lastPropValue: props.someValue
    };
  }
  return null;
}

3. Move Logic to Event Handlers When Possible

Often, derived state can be calculated during rendering or in response to events rather than in componentDidUpdate.

Functional Component Equivalent (useEffect)

For function components with hooks, similar rules apply:

useEffect(() => {
  // ✅ Correct with dependency array
  if (someValue !== prevValueRef.current) {
    setDerivedValue(someValue * 2);
    prevValueRef.current = someValue;
  }
}, [someValue]); // Only runs when someValue changes

Key Solutions to Prevent Loops

1. Always compare previous and current props/state
2. Add additional checks for the derived state value
3. Consider if the state is really necessary (can it be computed during render?)
4. For class components, sometimes getDerivedStateFromProps is more appropriate
5. For function components, ensure proper dependency arrays in useEffect

Remember that componentDidUpdate is called after every render, so any setState calls there will trigger another render unless properly guarded.