calling setState in componentDidUpdate of a PureComponent causes an infinite loop

[joseph-bakke]

Current behavior

A PureComponent that fires setState in componentDidUpdate with no changes to the state values enters an infinite loop if the component has more than one state property.

Expected behavior

componentDidUpdate should not be called if there are no changes to the state property values regardless of the number of state properties.

Investigation

I dug into this a bit to figure out what was going on, and I think I found the crux of the issue.

At ShallowWrapper:781 statePayload is being passed to pureComponentShouldComponentUpdate.

The issue is that statePayload is only the object passed to setState, not the result of the next state update, so the shallowEqual check will always fail.

In the below example the statePayload value would be

{ secondValue: false }

Then the shallowEquals check would be as follows, which would always fail.

!shallowEqual({firstValue: false, secondValue: false}, {secondValue: false})

The check should be

!shallowEqual({firstValue: false, secondValue: false}, {firstValue: false, secondValue: false})

Example Test:

class Example extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      firstValue: false,
      secondValue: false,
    };
  }

  componentDidMount() {
    this.setState({secondValue: false});
  }

  componentDidUpdate() {
    this.setState({secondValue: false});
  }

  render() {
    return React.createElement('div', null, this.state.firstValue + ' ' + this.state.secondValue);
  }
}

it('should not go crazy', () => {
  expect(() => {
    shallow(React.createElement(Example));
  }).not.toThrow();
});

Your environment

API

• shallow
• mount
• render

Version

library	version
enzyme	3.9
react	16.8.6
react-dom	16.8.6
react-test-renderer	16.8.6
adapter (below)
jest	24.7.1

Adapter

• [ x ] enzyme-adapter-react-16

[joseph-bakke]

I'm happy to take a whack at fixing this, but I wanted to file an issue first and get confirmation from someone with a little more familiarity that this is indeed a bug before opening a PR :).

[ljharb]

Thanks, enzyme has to wrap component setStates in order to update properly, and it's likely we need extra handling for PureComponent. A PR would be great!

[hugomallet]

Hi,

I still have this bug with 3.10.0. Is the fix already merged ?

[ljharb]

yes, and released. Please file a new issue if you’re still having trouble.