Функция стрелки в функциональном компоненте, возвращение извне, хорошее или плохое

Question

У меня есть вопрос по теме, о которой я читал, но все еще смущен в одном отношении.

До сих пор я придерживался правила ESlint jsx-no-bind, чтобы предотвратить проблемы с мелким рендерингом рек и проблемами с производительностью.

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

Но что, если в функциональном компоненте функция стрелки объявлена ​​вне возврата, я бы предположил, что она не будет воссоздана при каждом рендеринге, а скорее будет указывать на одну и ту же функцию каждый раз. Но правило ESlint jsx-no-bind предупредит меня, что я не должен этого делать.

Вот пример того, как я обычно делаю это с компонентом Class

class Click extends React.Component {
  handleClick = (event) => {
    const { onClick, id } = this.props

    onClick(id)
  }

  render () {
    return (
      <button onClick={this.handleClick}>
    )
  }
}

А вот как я видел, как это делается с функциональным компонентом

const Click = ({ onClick, id }) => {
   const handleClick = () => {
      onClick(id)
   }

   return <button onClick={handleClick} />

}

В последнем случае ESlint предупредит меня о том, что в JSX не используется функция стрелок, но это проблема? Я предполагаю, что это то же самое, что и с функцией класса, в том, что функция не воссоздается при каждом рендеринге.