Understanding useCallback, useMemo, and memo

In order to understand the difference between useCallback, useMemo and memo, we will do a to-do list example. You can create a basic application by using create-react-app and typescript as a template:

create-react-app todo --template typescript

Right after that, you can remove all the extra files (App.css, App.test.ts, index.css, logo.svg, reportWebVitals.ts, and setupTests.ts). You just need to keep the App.tsx file, which will contain the following code:

// Dependencies
import { useState, useEffect, useMemo, useCallback } from 'react'

// Components
import List, { Todo } from './List'

const initialTodos = [
  { id: 1, task: 'Go shopping' },
  { id: 2, task: 'Pay the electricity bill'}
]

function App() {
  const [todoList, setTodoList] = useState(initialTodos)
  const [task, setTask] = useState('')

  useEffect(() => {
    console.log('Rendering <App />')
  })

  const handleCreate = () ...