Now that we have connected the TodoList component, we can move the filter logic from the App component to the TodoList component, as follows:

1. Import the useMemo Hook in src/components/TodoList.js:

import React, { useMemo } from 'react'

2. Edit src/components/App.js, and remove the following code:

    const filteredTodos = useMemo(() => {
        const { filter, todos } = state
        switch (filter) {
            case 'active':
                return todos.filter(t => t.completed === false)

            case 'completed':
                return todos.filter(t => t.completed === true)

            default:
            case 'all':
                return todos
        }
    }, [ state ])

3. Now, edit src/components/TodoList.js, and add the filteredTodos code here. Please note that we removed the destructuring from the state object, as the component already receives the filter and todos values as props. We also adjusted the dependency array accordingly:

    const filteredTodos = useMemo(() => {
        switch (filter) {
            case 'active':
                return todos.filter(t => t.completed === false)

            case 'completed':
                return todos.filter(t => t.completed === true)

            default:
            case 'all':
                return todos
        }
    }, [ filter, todos ])

Now, our filtering logic is in the TodoList component, instead of the App component. Let's move on to connecting the rest of our components.