Отличный вопрос!

Давайте разберем, что происходит в вашем примере.

  1. Каждый раз, когда рендерится указанный выше компонент button, выражение, предоставленное onClick prop, вычисляется. В данном случае это вызов функции handleClick(…args)

2. Выполняется функция handleClick. Он создает и возвращает другую функцию (event) => {…}

3. Затем выполняется возвращенная стрелочная функция.

Хотя это сработает, есть причина, по которой вы можете этого не делать. Если вы создаете встроенную функцию внутри своего метода рендеринга, эта встроенная функция будет создаваться заново каждый раз, когда ваш компонент повторно визуализируется. Создание новой функции не бесплатно — это будет стоить как процессорного времени, так и памяти. Не так много, но если ваш компонент часто перерисовывается, эти накладные расходы складываются. Более того, поскольку новые экземпляры этой функции создаются при каждом рендеринге, старые не удаляются сразу. Они какое-то время остаются в памяти, заброшенные, запланированные на сборку мусора. Эти забытые функции будут занимать память до тех пор, пока сборщик мусора не доберется до них. Не так много, но опять же, эти мелочи складываются.

ESLint даже имеет правило react/jsx-no-bind для предупреждения именно об этой проблеме.