😶 Когда каждый onClick — минус FPS

Кажется, что всё просто: список, onClick — готово. Но при сотнях элементов каждый ререндер создаёт новые функции в JSX.
React считает их изменёнными и перерисовывает даже те строки, что не менялись.

На демо — незаметно. На проде — больно.

🔤 Почему это работает:

Каждый ререндер создаёт новые колбэки → React считает пропы изменёнными → перерисовывает.

useCallback стабилизирует ссылку, и компонент больше не «дёргается» без причины.

🔤 На проде:

— Если список огромный — рендерьте только видимую часть (react-window, react-virtualized).

— Если элемент сложный — выносите его в memo-компонент с передачей колбэка через пропсы.

🐸 Библиотека фронтендера

#hotfix #react