Triggering re-renders for nested object mutations in @State
0 reputation · 01 May 2020, 05:20 UTC
StencilJS utilizes a reactive state system where the @State() decorator triggers a component re-render when a value changes. However, the framework's change detection mechanism relies on reference equality for non-primitive types.
When managing complex data structures, such as deeply nested configuration objects or regional time zone settings, mutating a property within an object does not change the object's memory reference. This behavior can prevent the virtual DOM from patching the UI, even though the underlying data has been updated.
What is the most performant way to notify StencilJS of a change within a nested object without replacing the entire state tree? Does the framework provide a mechanism to track deep mutations, or is manual reference reassignment the only viable approach for triggering a render?