🙉 Слушаем и обрабатываем

Почему-то у людей при написании обработчиков событий случается буря вариантов.

Например:

const onClick = () => {};
const clickHandler = () => {};
const handleClick = () => {};

<div onClick={fn} />;

Давайте просто почитаем.

• onClick - на клик onClick={onClick} - на клик на клик
• clickHandler - обработчик клика onClick={clickHandler} на клик обработчик клика
• handleClick - обработать клик onClick={handleClick} на клик обработать клик

После прочтения должно быть понятно, что третий вариант более натуральный, чем остальные, а первый выглядит так, что бытие будет вызывать событие, но никак его не обрабатывать.

На самом деле все довольно просто, если вы создаете функцию, которая будет обрабатывать какое-то событие, то это всегда приставка handle:

const handleClick = () => {};

<div onClick={handleClick} />;

Если вы хотите сообщить что-то, то это приставка on, что символизирует событие. Например React использует пропсы с префиксом on в стандартных элементах, для работы с событиями. Элементы React сами по себе не обрабатывают события, они как бы сообщают через callback, что что-то произошло, например клик.

Так же одно событие может порождать другое событие или обработчик порождать какое-либо событие, например возьмем React компонент:

export type Props = {
  onChange?: (event: KeyboardEvent) => void
}
export const SomeComponent = ({ onChange }: Props) => {
  // ...
  return <input type="text" onKeyDown={onChange} />
}

// ---------------------------------------------------

export type Props = React.PropsWithChildren<{
  id: number
  onSelect?: (id: number) => void
}>

export const SomeComponent = ({ id, children, onSelect}: Props) => {
  const handleClick = () => {
    // ...
    onSelect?.(id)
  }
  return <button type="text" onClick={handleClick}>{children}</button>
}

Ссылку на функцию, можно воспринимать как делегирование ответственности за какое-то действие в вашем коде. Вы отдаете обработку на откуп тому, кто будет работать с вашим кодом. Значит вы работаете с on, если вы пишете то, что будет обрабатывать какое-то событие, или будет вызываться как callback на параметр on, то используйте префикс handle.