Learn React Hooks

Using the local store Hook

In addition to providing global stores to store application-wide state, MobX also provides local stores to store local state. To create a local store, we can use the useLocalStore Hook.

We are now going to implement the Local Store Hook in the AddTodo component:

1. Edit src/AddTodo.js and import the useLocalStore Hook, as well as the useObserver Hook from mobx-react:

import { useLocalStore, useObserver } from 'mobx-react'

2. Then, remove the following State Hook:

    const [ input, setInput ] = useState('')

Replace it with a Local Store Hook:

    const inputStore = useLocalStore(() => ({

In this local store, we can define state values, computed values, and actions. The useLocalStore Hook will automatically decorate values ...