Update React state when xState context is changed!

[Ali-Hussein-dev]

I am trying to re-render a React component when state.context is changed, how can I tell React, your state is changed, useSerivce and asEffect might be a solution. I tried to execute them but they return errors.

[mattpocock]

@Ali-Hussein-dev Could you send through a code sandbox or code snippet of what you're trying to accomplish?

[davidkpiano]

React components will rerender if the state.context changes (in both useMachine and useService) by default.

[Ali-Hussein-dev]

Probably my implementing it not correct.
I have a container compo that holds useMachine the Machine context gets updated by a child compo, I expect the container compo will be rerendered, but only the child does!
I am trying to do something similar to the gallery app but the results & the form components are siblings.
What is the thing I missed that makes React aware of changes in the machine context?

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given and in your case there are none.

[Ali-Hussein-dev]

Sorry for inconvenience. here is a Codsandbox demo.
https://codesandbox.io/s/demo-r382r?file=/src/App.js

[mattpocock]

It looks like you're using one useMachine call in one component, and another useMachine call in another component.

Each useMachine call creates a distinct service, which has its own state and context.

To synchronise them, remove one of them and pass 'state' and 'send' through props to the other component.

[Ali-Hussein-dev]

Thank you @mattpocock Important to know what you mentioned.