Ejercicio: Efectos con useEffect

⏱ 30 minutos
📶 Nivel: principiante

Objetivo

Crear un borrador que se guarda solo, actualiza el título de la pestaña y se recupera al volver.

Cómo se trabaja

Escribe un componente llamado App (puedes crear los demás que necesites). Prueba tu código en el editor de abajo; cuando funcione, pega todo el archivo en el comprobador. Los import de react se aceptan y se ignoran, porque aquí React ya está cargado.

⚛️ Tu editor de React (empieza desde aquí)

Código (edítalo y pulsa Ejecutar)

import { useState, useEffect } from "react";

function App() {
  return <h1>Mi borrador</h1>;
}

Resultado

Consola

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

Crea un componente App con un <textarea> controlado (estado texto).
El estado inicial debe leerse de localStorage con la clave "borrador" (con función inicial perezosa).
Con un efecto, guarda texto en localStorage con la clave "borrador" cada vez que cambie.
Con otro efecto, actualiza document.title a «Caracteres: N».
Muestra en un <p className="contador"> el número de caracteres, y un botón «Borrar» que vacíe el texto.

💡 Pista 1: dos efectos

Es mejor tener un efecto por cada tarea: uno para localStorage y otro para document.title, ambos con [texto].

💡 Pista 2: leer al inicio

Usa useState(() => localStorage.getItem("borrador") || "").

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

Tu código de React (el archivo App.jsx completo)

✅ Ver una solución posible

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

App.jsx

import { useState, useEffect } from "react";

export default function App() {
  const [texto, setTexto] = useState(() => localStorage.getItem("borrador") || "");

  useEffect(() => {
    localStorage.setItem("borrador", texto);
  }, [texto]);

  useEffect(() => {
    document.title = "Caracteres: " + texto.length;
  }, [texto]);

  return (
    <main>
      <textarea value={texto} onChange={(e) => setTexto(e.target.value)} rows={4} />
      <p className="contador">{texto.length}</p>
      <button onClick={() => setTexto("")}>Borrar</button>
    </main>
  );
}

💡 🏁 Reto extra (opcional)

Añade un aviso «Guardado hace un momento» que aparezca 1 segundo después de dejar de escribir (usa setTimeout y su limpieza).