Почему передача функций через props может ломать мемоизацию?

Question

Функции в JavaScript — это объекты, и при каждом рендере создаётся новая функция. Для React.memo это выглядит как изменение пропса. В результате мемоизация не срабатывает. Даже если логика функции не меняется, ссылка на неё новая. Это частая причина бесполезного использования React.memo.

YeaHub · Accepted Answer

Чтобы понять проблему, важно помнить, как создаются функции в JavaScript.Почему ссылка меняетсяПри каждом рендере:<Component onClick={() => doSomething()} />
Создаётся:новая функцияновая ссылкановый пропДля React.memo это означает, что проп изменился.ПоследствияИз-за этого:дочерний компонент перерендериваетсямемоизация теряет смыслоптимизация не работаетДаже если функция делает одно и то же, React не может это определить.Частая ошибкаИспользование React.memo без стабилизации функций:создаёт ложное ощущение оптимизацииусложняет кодне даёт выигрыша в производительностиВыводПередача функций через props ломает мемоизацию из-за изменения ссылки. Это нормальное поведение JavaScript, а не баг React.