Bug: state could be reset into the initialValue when using StrictMode

React version: 16.13.1

Steps To Reproduce

1. Wrap application with StrictMode
2. use useState
3. sometimes value would be reset to the initial

Link to code example: https://codesandbox.io/s/react-stripe-js-z79qw?file=/src/index.js

There are two cases, one is not working in StrictMode and one works well. Without strick mode both works. Console output is empty.

We actually found the buggy behaviour in stripe-js/react - it uses useState to save the context value. And it is (not) working this way:

• (render1) the stripe value set
• (render1) setContext is called (https://github.com/stripe/react-stripe-js/blob/c97c0ee094605c1d6aa1528f740e7c784e2464a7/src/components/Elements.tsx#L135)
• (render2) component rerendered with a correct state
• (render3) component rerendered with incorrect state, equal to the initial one

In the same time:

• data in “refs” is correct
• using a bit different API (promises), moving setContext update into nested component, is working as well. (https://github.com/stripe/react-stripe-js/blob/c97c0ee094605c1d6aa1528f740e7c784e2464a7/src/components/Elements.tsx#L148)

The current behavior

I’ve failed to understand the current behavior - there is a case (we know one) when state is reset, while there are many cases where everything is working as expected.

The expected behavior

State should be always preserved; StrictMode should have to effect on hooks.

[theKashey]

Anyway, look like this is not a bug, but a feature. I consider my question as fully answered and the problem is absolutely clear now. It’s not only “not right”, but actually “not safe” to base any logic on refs. If one could do it other, probably immutable way,- they should.

[eps1lon]

But one could monkey patch useState and detect situations like this.

You don’t know where this value comes from. It could be safe e.g. from a mutable source or context. React itself might be able to do that because it could know that a second setState was triggered from strict mode.

But in concurrent mode it’s valid to call setState with different values between renders.