Можно ли передовать callback через arrow function?

Question

[nana141414]

Примеры из документации

1

class LoggingButton extends React.Component {
 handleClick = () => {  console.log('');  }; 

 render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

2

class LoggingButton extends React.Component {
  handleClick() { console.log('');}

  render() {
        return (      
            <button onClick={() => this.handleClick()}>  Click me </button>
    );
  }
}

The problem with this syntax(2) is that a different callback is created each time the LoggingButton renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering.

Но ведь не только стрелочная функция пересоздается при перерендоре, но и сам handleClick.
При перерендоре LoggingButton, handleClick меняет ссылку и наш дочерний элемент (который получает handleClick как проп) в любом случае обновляется и не важно, передаем мы handleClick напрямую или через стрелочную функцию

Или по другому, почему onClick={this.handleClick} предпочтительнее?

Answer 1

[Vladimir Lewandowski]

При перерендоре LoggingButton, handleClick меняет ссылку

Нет.

Comments

[nana141414]

App.jsx

function App() {
    const [a, setA] = useState(3);
  
    setTimeout(() => {
      setA(2);
    }, 2000);
  
    const calback= () => {
      console.log(1)
    }
  
    return (
        <Child onClick={calback}/>
    )
}

Child.jsx

import { memo } from "react";

// Child обновляется только если меняется ссылка функции onClick
export default memo(function Child({onClick}) {
    console.log('tick')
  return <div>11</div>;
});

Через 2 секунды видим console.log('tick')

[Vladimir Lewandowski]

nana141414, ну погодите, в вопросе LoggingButton — класс, в комментарии App — функция.

[nana141414]

Vladimir Lewandowski, Думал, перерендер одинаково работает для классов и функций. Спасибо

Answer 2

[Alexandroppolus]

В примерах используется классовый компонент. Экземпляр класса создается при появлении компонента и уничтожается при размонтировании, то есть живет всё время, пока элемент присутствует в дереве. Соответственно стрелочная функция, объявленная в классе, живет всё это время и не меняется. Причем для каждого экземпляра создается своя стрелочная функция, внутри которой this указывает на свой экземпляр (т.е. он прибит гвоздями к экземпляру при любом вызове функции). То есть эту функцию можно как есть передать в виде колбэка, потому что у неё правильный this всегда с собой.

Нестрелочная функция живет в прототипе. Она общая на все экземпляры, но this у неё определяется при её вызове. То есть её нельзя просто так передать как колбэк - будет неправильный this. И её приходится передавать вот так: () => this.handleClick(). Но из-за этого в дочерний компонент при каждом рендере родителя приходит новый проп, и он (дочерний) вынужден обновляться. Потому вариант со стрелкой лучше.

Если используются функциональные компоненты, то для изготовления более-менее постоянной функции можно применить useMemo/useCallback, или ещё более радикальное решение https://github.com/reactjs/rfcs/blob/useevent/text...
(последнее работает только для функций, которые не будут вызываться в момент рендера, а только после, как эффекты или обработчики событий. Твой вариант, в общем)