⚛️ 5 хаков React, о которых не знают новички

React.js – мощная библиотека для создания пользовательских интерфейсов, но многие начинающие разработчики не используют его на полную силу. В этой статье разберем 5 полезных хаков, которые помогут вам писать более чистый, производительный и удобный в поддержке код.

1. Использование useRef вместо useState для неконтролируемых обновлений

Многие новички используют useState, когда им нужно хранить значения между рендерами. Однако, если обновление состояния не требует повторного рендера компонента, лучше использовать useRef.

Пример:

Здесь при обновлении countRef.current не происходит повторного рендера компонента.

2. Ленивое создание состояния

Если значение useState требует сложных вычислений, его можно инициализировать лениво:

Это предотвратит лишние вызовы функции expensiveCalculation() при каждом ререндере.

⚛️🧹 React без воды: 20 техник чистого кода

От условного рендеринга до деструктуризации — разбираем приемы, которые сделают ваш код более профессиональным и поддерживаемым.

3. Мемоизация функций с useCallback

При передаче функций в дочерние компоненты стоит использовать useCallback, чтобы предотвратить ненужные перерендеры:

Без useCallback при каждом ререндере Parent создавалась бы новая функция handleClick, что могло бы вызвать ненужный ререндер Child.

4. Оптимизация ререндеров с React.memo

Если компонент получает одни и те же пропсы, но ререндерится, можно использовать React.memo:

Теперь MemoizedComponent не будет ререндериться, если value не изменилось.

5. Управление состоянием с useReducer

Если у вас сложная логика изменения состояния, useReducer может заменить useState:

Этот метод делает управление состоянием более предсказуемым и удобным при сложных изменениях.

👨‍💻🎨 Библиотека фронтендера

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»

***

Эти пять хаков помогут вам улучшить навыки в React.js, сократить количество лишних ререндеров и писать более оптимизированный код. Используйте их в своих проектах и делитесь с другими разработчиками!