Иногда компонент начинает перерендериваться слишком часто, даже когда его пропсы не меняются. Особенно это заметно в списках, формах и сложных UI.
Сегодня я расскажу, как я на проектах использую мемоизацию коллбеков и данных, чтобы UI перестал «дергаться».
🔥 Проблема
Допустим, есть список элементов, и каждый элемент получает проп
onSelect, который создаётся при каждом рендере родителя:
const handleSelect = id => {
setSelected(id);
};
Каждый раз новая функция → дочерние элементы думают, что проп изменился → ненужный ререндер.
✅ Решение
Используйте
useCallback:
const handleSelect = useCallback((id) => {
setSelected(id);
}, []);
Но самое интересное - часто хватает мемоизации не всех, а только “горячих” функций.
Я обычно включаю профайлер, смотрю самые частые ререндеры и мемоизирую только узкие места. Так производительность улетает вверх без лишнего усложнения кода.
🎯 Практическое правило, которое я использую
Мемоизируйте только то, что реально ререндерится слишком часто.
Слепая мемоизация = грязный код.
✍️ @React_lib