lens/docs/extensions/guides/working-with-mobx.md

Working with mobx

Introduction

Lens uses mobx as its state manager on top of React's state management system. This helps with having a more declarative style of managing state, as opposed to React's native setState mechanism. You should already have a basic understanding of how React handles state (read here for more information). However, if you do not, here is a quick overview.

• A React.Component is generic over both Props and State (with default empty object types).
• Props should be considered read-only from the point of view of the component and is the mechanism for passing in "arguments" to a component.
• State is a component's internal state and can be read by accessing the parent field state.
• State must be updated using the setState parent method which merges the new data with the old state.
• React does do some optimisations around re-rendering components after quick successions of setState calls.

How mobx works:

mobx is a package that provides an abstraction over React's state management. The three main concepts are:

• observable: data stored in the component's state
• action: a function that modifies any observable data
• computed: data that is derived from observable data but is not actually stored. Think of this as computing isEmpty vs an observable field called count.

Further reading is available from mobx's website.