Passing a state manager obtained using fromContext to another component that is disconnected from the DOM before the original component causes the original component to stop receiving updates when the state manager changes.
Consider a scenario like the following:
- Component X uses
fromContext to obtain a reference to a state manager instance.
- Component X creates a modal and passes the state manager instance as an
@api property to the component Y in the modal.
- The user interacts with the modal and closes it.
Closing the modal causes component Y to be disconnected from the DOM, and (incorrectly) terminates component X's subscription to changes in the state manager instance. Subsequent changes to the state manager instance will not trigger re-renders of component X.
Note that this behavior is specific to state manager instances obtained using fromContext. References to state manager instances obtained via other means should not have this issue.
As a temporary workaround, components should pass the value of the state manager instance to the ephemeral component rather than a reference to the state manager instance itself. That is instead of doing:
<!-- broken -->
<temp-component state={myStateManager}/>
do:
<!-- workaround -->
<temp-component state={myStateManager.value}/>
Both components will be reactive to changes in the state manager's value and the subscription will not be impacted when the ephemeral component is disconnected.
Passing a state manager obtained using
fromContextto another component that is disconnected from the DOM before the original component causes the original component to stop receiving updates when the state manager changes.Consider a scenario like the following:
fromContextto obtain a reference to a state manager instance.@apiproperty to the component Y in the modal.Closing the modal causes component Y to be disconnected from the DOM, and (incorrectly) terminates component X's subscription to changes in the state manager instance. Subsequent changes to the state manager instance will not trigger re-renders of component X.
Note that this behavior is specific to state manager instances obtained using
fromContext. References to state manager instances obtained via other means should not have this issue.As a temporary workaround, components should pass the value of the state manager instance to the ephemeral component rather than a reference to the state manager instance itself. That is instead of doing:
do:
Both components will be reactive to changes in the state manager's value and the subscription will not be impacted when the ephemeral component is disconnected.