Learn React Hooks

Using Hooks for the App component

We are going to start by upgrading our App component. It is possible to gradually refactor components so that they use Hooks instead. We do not need to refactor every component at once.

Let's use Hooks for the App component now:

1. Edit src/App.js and remove the following import statement:

import { inject } from 'mobx-react'

2. Then, import the useTodoStore Hook from our hooks.js file:

import { useTodoStore } from './hooks'

3. Now, remove the inject function that is wrapping the App component, and remove all props. The App function definition should now look as follows:

export default function App () {

4. Finally, use our Todo Store Hook to get the todoStore object:

    const todoStore = useTodoStore()

As you can ...