Eventos en REACT
¿Qué es un evento en REACT?
Un evento es una respuesta a una acción del usuario (como hacer clic, mover el mouse o escribir). En React, los eventos se manejan de forma sintética, es decir, a través de un sistema interno que simula el comportamiento de los eventos del DOM.
Diferencias entre Eventos Nativos y Sintéticos
En React usamos onClick, onChange, onSubmit, etc. Estos son eventos sintéticos.
🔁 Binding de eventos
En componentes funcionales no es necesario el binding manual, como ocurría en clases (this.handleClick = this.handleClick.bind(this)). Las funciones se vinculan automáticamente con su contexto.
Binding es el proceso de asociar una función al contexto (this) correcto en JavaScript. Esto es importante porque cuando usamos clases en JS (como en componentes de clase en React), el valor de this puede cambiar dependiendo de cómo y dónde se llama una función.
⚠️ Problema clásico en componentes de clase
En un componente de clase, si quieres usar un método como handler (por ejemplo, this.handleClick), tienes que asegurarte de que el método esté vinculado al objeto correcto (la instancia del componente), porque si no:
✅ ¿Qué pasa en componentes funcionales?
En los componentes funcionales modernos (los que usamos con funciones flecha y useState, useEffect, etc.), no hace falta hacer binding, porque:
-
No existe una instancia de clase (this)
-
Las funciones se definen dentro del componente
-
El contexto está siempre disponible por cerradura (closure) de JavaScript.
🎯 ¿Por qué esto es mejor?
-
✨ Menos código (no hace falta constructor ni bind)
-
🔒 Menos errores relacionados con this
-
🧼 Más limpio y moderno (recomendado por React)
💬 ¿Cuándo escucharás hablar de “binding”?
Probablemente en dos contextos:
-
Cuando trabajes con componentes de clase antiguos
-
Cuando compares la evolución de React hacia hooks y funciones flecha, donde se evita esta complejidad
🌟 Eventos personalizados
Puedes definir una función en el padre y pasarla por props. Esa función es el evento personalizado.
En React, un evento personalizado no es un "evento del DOM" (como click, submit, etc.). Se trata de una función que un componente padre le pasa a un componente hijo mediante props, para que el hijo pueda "avisarle" al padre que ocurrió algo.
💡 Es una forma de implementar comunicación de hijo a padre de manera controlada.
🎮 Ejemplo aplicado: eliminar un contacto
Supongamos que tenemos una app de contactos. El componente ListaContactos muestra cada contacto con un botón "Eliminar". Pero la lógica para eliminar está en el componente padre (por ejemplo, App). Entonces:
- El padre define una función llamada
onEliminar.
- Esa función se le pasa al hijo (
ListaContactos) como prop.
- El hijo invoca esa función cuando el usuario hace clic en el botón.
🧠 ¿Qué está pasando acá?
-
onEliminares un evento personalizado: no existe en el navegador, sino que lo creamos nosotros como una prop que contiene una función.
-
Lo que hace el hijo (ListaContactos) es simplemente llamar a esa función cuando algo pasa, en este caso, cuando se hace clic en el botón.
-
El evento pasa datos relevantes (el índice del contacto a eliminar).
✅ ¿Por qué usar eventos personalizados?
-
🔄 Permite que los componentes hijos informen cambios al padre, sin manejar directamente el estado.
-
📦 Mantiene la lógica de negocios (como useState, useReducer, etc.) dentro del componente padre.
-
🔍 Facilita la trazabilidad: el padre sabe cuándo y por qué cambió algo.
