10.0.0-alpha.1 - Children from context provider are rendered twice after state update

[vaneenige]

When you update state in a provider component and pass the value to it, the children will render twice instead of once (with the same data). It could impact performance quite a bit if the provider is at the top of the tree.

Here's a demo that compares the behaviour between React and Preact (same logic, different output in console): https://codesandbox.io/s/18lq5wmqjq

The example is using useEffect, useState and useContext, not sure if this has something to do with hooks. I could also make an example without if it would make the problem more clear!

[marvinhagemeister]

Thanks for your detailed bug report 👍 That's a really cool sandbox! 🎉

I think I have a good idea what's happening. In case a new value is assigned on a Provider it will trigger an update. Once that update is complete the Provider is meant to update all subscribed Consumers that were not part of the original update.

Problem is that our we compare the context value with a context object. That will always be true and our safeguard is rendered useless. The check in question is here:

https://github.com/developit/preact/blob/47fdd6d37802a0219facb990f7dfeaeec04463fd/src/create-context.js#L33

Need to think about a proper way to fix this, but we're one step close now that we know what's going on 👍

[damianobarbati]

I'm actually experiencing a different bug: Consumer components in a Context are mounted, then unmounted, then re-mounted again.
I'll make a repro as soon as I can.

[vaneenige]

Good catch, I've updated my example and added the useEffect hook with a console.log on mount and unmount and you're right!

[JoviDeCroock]

Thank you for updating the sandbox, we can use it as a test in next release which should fix these issues.