Manage State Across LWC Components with State Managers

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 not available in Experience Cloud at this time.

Note

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 defines 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.