import React, { useRef } from 'react';

export default function RefMagic() {
  // 1. Crea una referencia para el input
  
  // 2. Crea una referencia para contar clics (inicia en 0)

  const manejarFocus = () => {
    // 3. Pon el foco en el input usando la ref
  };

  const incrementoSecreto = () => {
    // 4. Aumenta la cuenta de la ref, pero no uses useState
    // 5. Muestra un alert con el valor actual de .current
  };

  return (
    <div style={{ padding: '20px', textAlign: 'center', fontFamily: 'sans-serif' }}>
      <h1>Manejo de Refs</h1>
      
      <input 
        placeholder="Escribe algo aquí..." 
        style={{ padding: '10px', marginBottom: '10px' }}
        // 6. Vincula la ref aquí
      />

      <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
        <button onClick={manejarFocus}>
          🎯 Enfocar Input
        </button>

        <button onClick={incrementoSecreto}>
          🤫 Clic Secreto (No re-renderea)
        </button>
      </div>

      <p style={{ marginTop: '20px', color: '#666' }}>
        💡 Mira la consola: los clics secretos no activan un render del componente.
      </p>
      {console.log("Componente renderizado...")}
    </div>
  );
}
Terminal
Ready

Waiting for execution...