Unexpected PureComponent Behavior?

[GarethSmall]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

Setup:

• A Component with a counter in it to track the number of renders.
• A container Component with a counter in it
• A container PureComponent with with a counter in it.

All three of the above components accept children.

• A main component that has a button in it that updates the state of some string value once

Scenario 1:

• I use the regular container component with a single child: the string value state
• I click the button multiple times
• It updates each time as expected

Scenario 2:

• I use the PureComponentContainer with a single child: a static string
• I click the button multiple times
• it has only renders 1 times (it's initial render) as expected

Scenario 3:

• I use the PureComponentContainer with a single child: the string value state
• I click the button multiple times
• it has only renders 2 times (it's initial render, and updated render) as expected

Scenario 4:

• I use the PureComponentContainer with a two children: the string value state, and a static value
• I click the button multiple times
• it updates each time I click, although the state value has changed only once. This is not expected

Here is an example where I implement each scenario as well as show a comparison using === and reacts shallowEquals

https://codesandbox.io/s/w0vvkk92nl

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?

I may not fully understand the expected behavior of a PureComponent. I would assume due to the nature of how shallowEqual works it would validate as expected, whether or not the props has the same reference. In my example I show what happens when I compare two example props that both have the same values, but difference references. When I use normal === it doesn't validate if the ref is different, in shallowEqual is validates as long as the values are the same even if the refs are different.

In my second example, the values are the same, and the reference to props doesn't change as expected
In my third example, the values are again the same and the reference to the props again doesn't change as expected

In my final example, the values are the same, but the reference changes.

From this I am lead to believe it's not validating even before it gets to the shallowEqual check.

Maybe my implementation is wrong?

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Google Chrome Version 70.0.3538.67 (Official Build) beta (64-bit)

16.5.2, I also tested on 16.6.0 alpha.

Mac OS 10.12.6

I haven't verified on previous versions

[GarethSmall]

Closing, this seems like a duplicate of: #8669