Context value updates are done in a second render

[ling1726]

Repro: https://codesandbox.io/s/fragrant-leaf-we1pvb?file=/src/App.js

Since the value ref is only updated in an effect, there are 2 renders that are required for a subscriber to get the correct updated value.

This can cause some very hard to debug issues, such as implementing an collapsibe or a popover where the open value is passed through context selector.

[ling1726]

This was not the case before 1.3.0: https://codesandbox.io/s/currying-resonance-73njnm

Before 1.3.0 there were still two renders for subscribers, but the correct value was already available in the first render

[dai-shi]

Yeah, it's a known limitation in v1.3. To my knowledge, there's no way to resolve this in userland without breaking things in concurrent rendering.

[ling1726]

Is it because of writing to refs at render time ? are you aware of any work in React to help make this safer ?

[dai-shi]

It's because we use useLayoutEffect for propagation.
Some references:

• useMutableSource → useSyncExternalStore reactwg/react-18#86
• Context selector status and plans? reactwg/react-18#73