🧠 Сегодня я покажу вам трюк, который ускоряет ре-рендеры в React на реальных проектах

Иногда компонент начинает перерендериваться слишком часто, даже когда его пропсы не меняются. Особенно это заметно в списках, формах и сложных UI.
Сегодня я расскажу, как я на проектах использую мемоизацию коллбеков и данных, чтобы UI перестал «дергаться».

🔥 Проблема

Допустим, есть список элементов, и каждый элемент получает проп onSelect, который создаётся при каждом рендере родителя:


const handleSelect = id => {
setSelected(id);
};


Каждый раз новая функция → дочерние элементы думают, что проп изменился → ненужный ререндер.

✅ Решение

Используйте useCallback:


const handleSelect = useCallback((id) => {
setSelected(id);
}, []);


Но самое интересное - часто хватает мемоизации не всех, а только “горячих” функций.
Я обычно включаю профайлер, смотрю самые частые ререндеры и мемоизирую только узкие места. Так производительность улетает вверх без лишнего усложнения кода.

🎯 Практическое правило, которое я использую

Мемоизируйте только то, что реально ререндерится слишком часто.
Слепая мемоизация = грязный код.

📲 Мы в MAX

✍️ @React_lib