Unexpected behaviour when Providing state

[bradlc]

Hi. I’m trying to update context from a nested component, similar to this example in the React docs.

However, preact-context doesn’t behave as expected (and as React.createContext does).

Here’s an example:
preact-context: https://codesandbox.io/s/q3n91mr3nw
React.createContext: https://codesandbox.io/s/nrpx565z50

[valotas]

Hi Brad, I'll have a look at it as soon as I'll be back from my holidays Cheers, George

…

On Thu, Jul 26, 2018, 20:00 Brad Cornes ***@***.***> wrote: Hi. I’m trying to update context from a nested component, similar to this example in the React docs <https://reactjs.org/docs/context.html#updating-context-from-a-nested-component> . However, preact-context doesn’t behave as expected (and as React.createContext does). Here’s an example: preact-context: https://codesandbox.io/s/q3n91mr3nw React.createContext: https://codesandbox.io/s/nrpx565z50 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#12>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABn8zKxXDU2U28_a2UIEAz4jn6k-T_lks5uKfXGgaJpZM4ViNQT> .

[bradlc]

Hey George,

Sounds good, thanks! 😎

Had a quick look, and if I change the Consumer component's shouldComponentUpdate method to just return true; it works as expected. So maybe it's an issue with the condition here?:

preact-context/src/context.ts

Lines 85 to 88 in 74217c0

	return (
	this.state.value !== nextState.value ||
	getRenderer(this.props) !== getRenderer(nextProps)
	);

[bradlc]

Actually, although changing it to return true; fixes the test case above, it doesn’t fix the original issue that I’m having on a project (again, it works fine with React.createContext). I will create another reduced test case for that if I can.

Edit: the issue on my project was actually caused by this preact bug, so you can disregard this comment

[valotas]

@bradlc the problem is that preact mutates the state instance on each update hence the this.state.value !== nextState.value check is always true. You have to make sure that you pass a new instance of the value to the Context.Provider (ex: <Context.Provider value={{ ...this.state }}>, see your updated example).

[valotas]

I'll try to catch up with some of the preact maintainers in order to provide a proper solution for that as it looks like it will be a problem that many preact users might have.

[marvinhagemeister]

This issue is caused by using an older release of preact. With the most recent version 8.3.1 I can't reproduce the issue anymore and the example works exactly the same as for react.

[bradlc]

You’re right, updating the CodeSandbox to 8.3.1 fixes the issue. Thanks!

[valotas]

thanks a lot for the clarification @marvinhagemeister !