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 see, our app still works in the same way as before! However, we are now using Hooks in the App component, which makes the code much more clean and concise.