Learn React Hooks

Using Hooks for the TodoList component

Next, we are going to upgrade our TodoList component. Additionally, we are also going to use the useObserver Hook, which replaces the observer higher-order component.

Let's use Hooks for the TodoList component now:

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

import { inject, observer } from 'mobx-react'

2. Then, import the useObserver Hook from mobx-react and the useTodoStore Hook from our hooks.js file:

import { useObserver } from 'mobx-react'import { useTodoStore } from './hooks'

3. Now, remove the inject and observer functions that are wrapping the TodoList component, and also remove all props. The TodoList function definition should now look as follows:

export default function ...