Managing Component State in StencilJS: @Prop vs @State
Learn how to effectively use @Prop and @State in StencilJS to manage component re-renders and avoid common pitfalls with object mutation in Web Components.
ReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
Learn how to effectively use @Prop and @State in StencilJS to manage component re-renders and avoid common pitfalls with object mutation in Web Components.
Learn how to split your StencilJS bundle at runtime using @Load, see a working parent‑child example, and verify the impact on initial load size and network behavior.
Stencil's React output target generates thin wrapper components so React can pass real props and listen to custom events. Here's what it does, where it fails, and how to verify it.
A decision guide that compares StencilJS client‑only, SSR with hydration, and static prerendering, shows trade‑offs, and provides a concrete Express‑server implementation.
Deciding between StencilJS's lazy-loaded 'dist' target and the 'dist-custom-elements' bundle is a trade-off between initial load speed and integration simplicity.
An architecture note that outlines the requirements for lazy‑loading StencilJS components, the minimal design needed, trust/data boundaries, operational verification steps, failure modes, and conditions that would trigger a redesign.
Learn how StencilJS’s @Lazy decorator splits a component into its own bundle, loads it on demand, and what trade‑offs to consider before applying it.
Decide whether to use eager, lazy, or hybrid loading for StencilJS components. Compare constraints, trade‑offs, and see a concrete example that validates on‑demand loading while keeping SSR and legacy browsers happy.
When a StencilJS app’s lazy‑loaded components fail in production, the root causes often lie in build config, base href, or server rewrite rules. This diagnostic guide walks through symptoms, checks, fixes, and escalation steps to help you pinpoint and resolve the issue quickly.