In the previous section, we learned how to replace MobX higher-order components, such as inject and observer in existing MobX applications with Hooks. Now, we are going to learn how to migrate local state to Hooks in existing MobX applications.

An existing MobX application can be migrated to a Hook-based solution by following three steps:

• Using a State Hook for simple local state
• Using the useLocalState Hook for complex local state
• Keeping global state in separate MobX stores

We have already learned how to use a State Hook in the early chapters of this book. State Hooks make sense for simple state, such as the current state of a checkbox.

We have already learned how to use the useLocalState Hook in this chapter. We can use the Local State Hook for complex local state, such as complex forms where multiple fields interact with each other. Then, we can replace multiple State and Effect Hooks with a single Local State Hook and computed values and actions.

Lastly, global state should be stored in separate MobX stores, such as the TodoStore, which we defined in this chapter. In MobX, multiple stores can be created and passed down to components using the Provider component. We can then create a separate custom Hook for each of the stores.