Веб-страница | frontend, backend, fullstack, react, vue, javascript, typescript, css, html
IT и технологии · 24 июля 2026 г.
React.memo не спасает, если в пропсы летят inline-объекты — 24 июля 2026 г. в 08:01:39.304
React.memo не спасает, если в пропсы летят inline-объекты Поисковая строка тормозит список, Profiler рисует 200 лишних рендеров, а вы уже обернули всё в React.memo и добавили useCallback на обработчики. Виноват обычно один JSX-паттерн: style={{ padding: 16 }} или колбэк прямо в разметке. memo сравнивает пропсы через Object.is, а для объектов и функций это проверка по ссылке: каждый рендер родителя создаёт новую ссылку, и React снова рисует дочерний компонент. Меня убедили цифры из эксперимента: 200 memoизированных строк на один keystroke рендерились 243,9 мс, после стабилизации ссылок — 6 мс. Поэтому статические объекты выносите за пределы компонента, а useCallback добавляйте только там, где колбэк реально уходит в memoизированного потомка. Хуки «на всякий случай» не помогут: сначала меряйте в Profiler. Полный разбор с примерами