Home / lwc / lwc-state-management
lwc-state-management
Share state across LWCs using pub/sub, Lightning Message Service, @wire, and reactive stores. NOT for in-component reactivity — use lwc/lwc-reactive-state-patterns.
Open the skill folder on GitHub
LWC State Management
LWC has four state-sharing mechanisms: (1) parent→child via public @api properties, (2) @wire for server-synced data, (3) Lightning Message Service for sibling LWCs/Aura, (4) custom events for child→parent. This skill picks the right mechanism based on component distance and persistence requirements, and shows why legacy pubsub and heavy external stores (Redux, MobX) should be avoided in favor of these native primitives plus tiny singleton signals.
Adoption Signals
Any time two non-parent/child LWCs must stay in sync. Not for tiny local state.
- Lightning Message Service (LMS) when sibling components on the same record page must coordinate selection.
- Pubsub when components live across the page hierarchy and an event must traverse Aura/LWC boundaries.
Recommended Workflow
- Parent→child: public @api props + custom events.
- Sibling LWCs: Lightning Message Service via a message channel (
@salesforce/messageChannel/Foo__c). - Server data:
@wire— it's reactive and cached. - App-wide reactive store: a singleton module exporting a signal-like observable; use sparingly.
- Platform state managers (Summer '26 GA): For cross-component reactive state without hand-rolled singletons, use
defineState()from@lwc/state(atom,computed,setAtomin the setup callback) or the built-inlightning/stateManager*modules (record, objectInfo, layout, related lists). Not available in Experience Cloud at Summer '26 — fall back to LMS or getters there. - For Aura↔LWC interop use LMS; pubsub library is legacy.
Key Considerations
- LMS requires a Custom Metadata record for the channel — check it in.
- @wire refresh via
refreshApexorgetRecordNotifyChange. - Don't import Redux into LWC (bundle bloat); use a tiny hand-rolled store.
- Sibling components must both subscribe after render.
Worked Examples (see references/examples.md)
- Sibling refresh via LMS — Edit panel + list panel
- App-wide current region — Multi-region switcher
Common Gotchas (see references/gotchas.md)
- Missing message channel — LMS silently no-ops.
- Race on subscription — First publish missed.
- Redux-style overhead — Bundle bloat, debug complexity.
Top LLM Anti-Patterns (full list in references/llm-anti-patterns.md)
- pubsub library in new code
- Bundling Redux/MobX into LWC
- Forgetting to deploy message channel
Official Sources Used
- Lightning Web Components Developer Guide — https://developer.salesforce.com/docs/platform/lwc/guide/
- Lightning Data Service — https://developer.salesforce.com/docs/platform/lwc/guide/data-wire-service-about.html
- LWC Recipes — https://github.com/trailheadapps/lwc-recipes
- SLDS 2 — https://www.lightningdesignsystem.com/2e/
- State managers GA in LWC (Summer '26 developer blog) — https://developer.salesforce.com/blogs/2026/05/state-managers-are-now-generally-available-in-lightning-web-components