📌 Convenciones de nomenclatura para manejadores de eventos en React

En la sección Responding to Events, no solo se explica cómo añadir manejadores de eventos, sino también cuál es la convención de nomenclatura recomendada.
Aquí te comparto un resumen de esas buenas prácticas:

https://react.dev/learn/responding-to-events

🧠 Convención básica de nombres

> Have names that start with handle, followed by the name of the event.
> By convention, it is common to name event handlers as handle followed by the event name.
> You’ll often see onClick={handleClick}, onMouseEnter={handleMouseEnter}, and so on.

> By convention, event handler props should start with on, followed by a capital letter.

En resumen, estas son las reglas simples:

• Para props de eventos: onEventname (como onClick)
• Para funciones manejadoras: handleEventname (como handleClick)

Existe incluso una regla de ESLint para asegurar esta convención, ideal si deseas mantener consistencia en tu equipo:

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-handler-names.md

🤔 ¿handleButtonClick o handleClickButton?

A título personal, sigo la convención de los eventos predeterminados del navegador y prefiero handleButtonClick.

https://developer.mozilla.org/es/docs/Web/Events#eventos

Curiosamente, la documentación de React muestra ambos patrones:

• handlePlayClick (parecido a handleButtonClick)
• onPlayMovie (parecido a handleClickButton)

Esto puede parecer inconsistente, pero puede que no lo sea: si no estás incluyendo explícitamente el nombre del evento (click, touch, etc.), entonces usar algo como playMovie puede tener más sentido semántico.

Como no soy experto en gramática inglesa, si alguien lo es y quiere aclararlo, ¡bienvenido sea! 🫠

🧩 Nombres basados en la acción, no en el evento

Toolbar pasa estos props como onClick a los botones, pero podría usarlos también con atajos de teclado.
Usar nombres como onPlayMovie te da flexibilidad para cambiar su uso más adelante.

export default function App() {
  return (
    <Toolbar onPlayMovie={() => alert('¡Reproduciendo!')} />
  );
}

function Toolbar({ onPlayMovie }) {
  return (
    <Button onClick={onPlayMovie}>Reproducir película</Button>
  );
}

En este ejemplo, podrías usar onPlayClick como nombre del prop, pero eso limitaría su uso solo a eventos click.

Si en el futuro quisieras usarlo también con eventos de teclado, tener onPlayClick sería confuso.
En cambio, usar onPlayMovie permite mayor reutilización sin importar el tipo de evento.

✅ Conclusión

Usar handleEventname y onEventname es una buena base.
Pero si defines tus nombres en función de la interacción específica de tu app (como onPlayMovie), conseguirás un código más flexible y preparado para el cambio.