TGViewer
Точка входа в программирование Точка входа в программирование @prog_point · 18K subscribers
Post #5013 1.29K

Forwarded from Веб-страница

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.

Полный разбор с примерами
  • 🤔 2
More from @prog_point
  1. Sep 20, 2026Как читать ввод с геймпада в JavaScript и не принять поломку за норму В Gamepad API нет со…
  2. Sep 20, 2026Как выбрать пагинацию для API Пагинация делит ответ API на части. Offset пропускает N стро…
  3. Sep 20, 2026Какие исключения ловить в Python и какие оставить видимыми Один except для ValueError, Typ…
  4. Sep 19, 2026Превращаем статичную HTML-страницу в редактор на JavaScript Резюме или меню можно отдать а…
  5. Sep 19, 2026Инструкция по применению: открыть анкету, ответить на вопросы из школьной тетрадки, по дор…
  6. Sep 19, 2026freeCodeCamp.org выпустил бесплатный курс по Python с тремя проектами Это четырёхчасовой в…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →