Choosing @State vs @Prop for Synchronous Updates: When Do Re‑renders Occur?

Internal vs External State: A Decision Point

StencilJS offers two primary decorators for managing component data: @State for internal, encapsulated state, and @Prop for data supplied by a parent or via an HTML attribute. The choice between them hinges on ownership of the data and the desired data flow direction.

When a component performs multiple updates—some to @State properties and others to @Prop properties—in a single synchronous block, the timing and ordering of re‑renders are not explicitly documented. This uncertainty can affect UI consistency, especially in complex component hierarchies.

Unresolved Behavior

While Stencil guarantees a re‑render whenever a decorated property changes, it does not specify whether the framework batches these changes or processes them sequentially. The lack of clarity raises questions about potential intermediate renders and the final render order.

Specific Questions

• When multiple @State and @Prop updates occur together, which properties trigger a re‑render first?
• Does Stencil batch all property changes within a synchronous block to produce a single render, or does each change cause its own render?
• What is the observable order of renders when both internal state and external props change simultaneously, and how does this affect component lifecycle hooks?