createContext is not fully React compatible

After migrating an app from React to Preact 10, we noticed that some of our components were unmounting with the incorrect props.

Reproduction

Here is a reproduction of the issue on simplified codebase.

Preact: https://codesandbox.io/s/upbeat-pasteur-r7soh React: https://codesandbox.io/s/wonderful-worker-u3uus

Steps to reproduce

So, the idea is that because of the key prop assigned to Parent, when id changes, it should unmount it with the previous id and then mount it with the new one. That’s my expectation at least and it works like that in React. Here is the console output when clicking on the text.

// React
render, id 0
mount, id 0
render, id 1
unmount, id 0
mount, id 1

But for Preact, I’m not fully sure, but it seems that nested consumers will update first, meaning that Child will be updated with the new id and only then will Parent realize that its key has changed and will unmount. Here are the console logs for the same click:

// Preact
render, id 0
mount, id 0
render, id 1
updated from 0 to 1
render, id 1
unmount, id 1
mount, id 1

As we can see, there is an update lifecycle now and the unmount is done with props.id at 1 rather than 0.

I wonder if either React is maintaining a more optimized stack for consumers or, even better, batch all updates to all consumers in one render.

Expected Behavior

Child component should not update and unmount directly with id: 0.

Actual Behavior

Child component is updated to id: 1 and unmounted with that value.

[pauldijou]

That was so fast! Thanks all for fixing that, you rock.

[JoviDeCroock]

Hey @pauldijou

This is still a problem with 2 vs 1 pass but specifically for context I found a solution, PR’ing it right now! I can’t begin to thank you enough for this awesome reproduction! Thanks you for making Preact better!