Manage State Across LWC Components with State Managers (Beta)
State management in Lightning Web Components (LWC) helps you group and manage data and its related logic more effectively within your apps. A state manager provides a structured way to handle application state, making it easier to share data across components, manage complex data interactions, and separate data concerns from presentation logic.
State management is a pilot or beta service that is subject to the Beta Services Terms at Agreements - Salesforce.com or a written Unified Pilot Agreement if executed by Customer, and applicable terms in the Product Terms Directory. Use of this pilot or beta service is at the Customer's sole discretion.
As apps grow in complexity, it can be challenging to manage the flow of data, ensure that components react appropriately to changes, and keep your codebase clean. LWC state management offers an idiomatic, LWC-native solution to these problems by introducing the concept of state managers.
A state manager is essentially a dedicated JavaScript module that encapsulates a related set of data (the "state") and the functions (or "actions") that operate on that data. This approach allows you to decouple your data logic from your component's rendering logic, leading to more organized, maintainable, and testable code.
A state manager implementation consists of the following elements.
- A function you provide to
defineState()that define the state manager implementation. - A set of named properties that hold the state. These properties can be simple values or values derived from other state (computed values).
- A set of named actions (functions) that can modify the state.
State managers work within the LWC Frameworkâs reactivity system. Changes to a state manager's exposed values automatically trigger updates in components that reference those values, including re-rendering those components when needed.