optimistic-ui-todos.js

import React, { useEffect, useState } from 'react'
import Todo from './Todo'

const fetchTodos = async () => {
  // Fetch todos list from API
}

export default function Todos() {
  const [state, setState] = useState({ loading: true })

  const { error, loading, todos } = state

  useEffect(() => {
    // Load todos list
    async function fetchMyTodos() {
      try {
        const todos = await fetchTodos()
        setState({ todos })
      } catch (error) {
        setState({ error: error.message })
      }
    }

    fetchMyTodos()
  }, [])

  if (error) {
    return (
      <p>{error}</p>
    )
  }

  if (loading) {
    return (
      <p>Loading todos...</p>
    )
  }

  return (
    <ul>
      {todos.map(todo => (
        <Todo key={todo.id} todo={todo} />
      ))}
    </ul>
  )
}