The three states of custom components

When working with custom components there are three states we want to know about. California, Pennsylvania, and Texas. No wait, those are different states. We mean component state, local state, and remote state, of course.

Component State

This is the regular React component state, which we can access by this.state. Component state is private, and controlled by the component. You can find documentation on React State and Lifecycle here or by copy-pasting this on your browser

We use component states when we need to track changes that affect the UI only, and don’t need to be synced to the flow. Examples – Dropdown toggling, or switching between tabs.

Local State

This is the flow state that currently exists in your browser session. The flow state contains a snapshot of the current state (values, selections, etc) of the flow. We can access the flow state of a component using the following code:
var state = manywho.state.getComponent(, this.props.flowKey);

We use local states when we do not need to sync changes back to Flow. Example – Values entered into an input. Generally when rendering a component, we will want to check if the state has a value to be displayed, then fallback to the model to get a value, then in the components event handler call manywho.state.setComponent to put the updated value into the local state.

Remote State

This is the same as the local state, however it exists in the Flow cloud. The local state may be out-of-sync with the remote state periodically. For example: A user running a flow enters some values as inputs on a page. These values  exist only in the local state, until the UI informs the Flow engine to sync (usually via an outcome on the page).

The remote state is handled by the Flow engine. If we want our component to trigger events in the flow, for example, this combobox should sync with the remote state when the value changes as other components will update based on the selected value in the combobox, then we should call manywho.component.handleEvent in the components change handler(s).

Check out: