Изменится ли поведение методов при передаче их как пропсов в другой React-компонент

Что проверяют

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

Как отвечать

Сама функция не меняется, меняется контекст вызова. В классовом компоненте метод, переданный как проп, вызывается как обычная функция, и this внутри становится undefined. Отсюда классические лечения: привязка в конструкторе или стрелочное свойство класса.

class Form extends React.Component {
  handleClick = () => { this.setState(...); };   // стрелка сохраняет this
}

В функциональных компонентах проблемы с this нет вовсе, зато появляются две другие, и именно про них стоит говорить сегодня:

• новая ссылка на каждый рендер: функция, объявленная в теле компонента, каждый раз новая. Для дочернего компонента, обёрнутого в memo, это означает лишнюю перерисовку, а в зависимостях эффекта бесконечный цикл. Лечится useCallback или переносом функции наружу;
• замыкание на устаревшие значения: функция помнит состояние того рендера, в котором была создана. Если она попадёт в подписку или в таймер и переживёт несколько рендеров, то будет работать со старыми данными. Лечится функциональным обновлением состояния (setCount(c => c + 1)) или ссылкой на актуальное значение.

Отдельно стоит упомянуть частую ошибку в разметке: onClick={handleClick()} вызывает функцию сразу при рендере вместо передачи, а onClick={() => handleClick(id)} создаёт новую функцию на каждый рендер, что допустимо, но мешает мемоизации.

Где спотыкаются

Не понимают, почему this внезапно undefined, и добавляют привязку наугад.

Оборачивают всё подряд в useCallback, забывая, что сам он тоже не бесплатен и без memo у дочернего компонента бесполезен.

Ловят устаревшее состояние в обработчике, переданном в подписку, и объясняют это ошибкой React.