Learn React Hooks

Migrating the component

Now that we have defined our reducers, we can start migrating the App component. Let's migrate it now:

1. Edit src/App.js and adjust the import statement to import useReducer, useEffect, and useMemo from React:

import React, { useReducer, useEffect, useMemo } from 'react'

2. Import the appReducer function from src/reducers.js:

import appReducer from './reducers'

3. Remove the class component code. We are going to define a function component instead now.

4. First, we define the function, which is not going to accept any props:

export default function App () {

5. Now, we define a Reducer Hook using the appReducer function:

    const [ state, dispatch ] = useReducer(appReducer, { todos: [], filter: 'all' })

6. Next, we define an ...