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

// ESTE ES EL COMPONENTE QUE DEBES ARREGLAR
function Cronometro() {
  const [segundos, setSegundos] = useState(0);

  useEffect(() => {
    // 💡 Tip: Usa const id = setInterval(...)
    
    // 1. Crea tu intervalo aquí
    
    // 2. RETORNA la función de limpieza () => clearInterval(id)
  }, []);

  return (
    <div style={{ border: '2px solid #646cff', padding: '20px', borderRadius: '8px', margin: '20px 0' }}>
      <h2>⏱️ Tiempo: {segundos}s</h2>
      <p style={{fontSize: '0.8rem', color: '#888'}}>Abre la consola para ver los logs</p>
    </div>
  );
}

export default function App() {
  const [mostrar, setMostrar] = useState(true);

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif', textAlign: 'center' }}>
      <h1>El Cronómetro Fantasma</h1>
      
      <button 
        onClick={() => setMostrar(!mostrar)}
        style={{ 
          background: mostrar ? '#ff4444' : '#44ff44', 
          color: 'white', 
          border: 'none', 
          padding: '10px 20px', 
          borderRadius: '5px', 
          cursor: 'pointer' 
        }}
      >
        {mostrar ? "Ocultar Cronómetro" : "Mostrar Cronómetro"}
      </button>

      {mostrar && <Cronometro />}
      {!mostrar && <p style={{marginTop: '20px'}}>Componente desmontado. ¿Sigue el log en la consola? 👻</p>}
    </div>
  );
}
Terminal
Ready

Waiting for execution...