Estados de carga y error

Por fin ya entendí como grabaron el curso

El VSC realmente solo es el 70% de la pantalla el 30% demás es agregado en edición al igual que sus elementos y lineas para que coincida, gran trabajo pero por unos pixeles y los símbolos duplicados me di de cuenta sin embargo es un gran avance

Dato curioso platzi esta hecho con react

Otra forma de realizar la logica para informarle a el usuario que debe crear un TODO es

!loading && !searchedTodos.length && 'Crea algún TODO'}

si es 0 es un valor Falsy y al negarlo se convierte en verdadero
https://developer.mozilla.org/en-US/docs/Glossary/Falsy

Dato curioso, de la siguiente manera se pueden importar las diferentes herramientas que nos provee React:

import React, { useState, useEffect } from "react";

quiero dar mi aporte dejo mi codigo aqui para que puedan entender el flujo de la app que explica el profe

import React from "react";
import { useEffect } from "react";
//custom Hooks
export const useLocalStorage = (itemName, initialValue)=>{
    //local storage
    const item_Todos = () => {
        /**
         * Retrieves the value of an item from the local storage. If the item does not exist, it sets the initial value for the item in the local storage and returns the initial value. If the item exists, it returns the value of the item from the local storage.
         * 
         * @returns {any} The value of the item from the local storage.
         */
        let localStorageItem = JSON.parse(localStorage.getItem(itemName));
        if (!localStorageItem) {
            localStorage.setItem(itemName, JSON.stringify(initialValue));
            return (localStorageItem = initialValue);
        } else {
            return localStorageItem;
        }
    };
    //state of react
    const [item, setItem] = React.useState(initialValue);
    const [loading, setLoading] = React.useState(true);
    const [error, setError] = React.useState(false);
    //useEffect
    useEffect(()=>{
        setTimeout(()=>{
            try {
                setItem(item_Todos());
                setLoading(false);
            } catch (error) {
                setLoading(false);
                setError(true);
            }
        }, 1800);
    },[])

    //almacenamiento en local storage
    const saveItem=(newItem)=>{
        localStorage.setItem(itemName, JSON.stringify(newItem));
        setItem(newItem);
    }
    return {item, saveItem, loading, error}
}
 

Condicionales en React: https://es.legacy.reactjs.org/docs/conditional-rendering.html