🔖 Почему ваш WebSocket переподключается при каждом рендеринге?
Вы создали WebSocket, но соединение постоянно разрывается и переподключается. Проблема: React создаёт новый экземпляр сервиса при каждом рендеринге. Без useCallback сервис теряет стабильную ссылку, что приводит к переподключениям и утечкам памяти.
// Плохо - сервис пересоздаётся при каждом рендеринге
function ChatComponent() {
const ws = new WebSocket('ws://server');
const sendMessage = (msg) => {
ws.send(msg); // Новый WebSocket при каждом рендере
};
return <button onClick={() => sendMessage('Hi')}>Send</button>;
}
// Хорошо - стабильная ссылка на сервис
function ChatComponent() {
const wsRef = React.useRef(new WebSocket('ws://server'));
const sendMessage = React.useCallback((msg) => {
wsRef.current.send(msg); // Один и тот же WebSocket всегда
}, []);
return <button onClick={() => sendMessage('Hi')}>Send</button>;
}
📎 Основные проблемы:
🔸 WebSocket переподключается, теряя состояние соединения
🔸 Память утекает: старые соединения не закрываются
🔸 Event listeners создают дубликаты
🔸 Производительность падает из-за пересоздания ресурсов
Когда компонент рендерится без useCallback, каждый раз создаётся новая функция. Для долгоживущих сервисов (WebSocket, Worker) это критично — вы разрываете всё, что было до этого, вместо переиспользования.
Ключевой момент: useRef гарантирует, что сервис существует на весь цикл компонента, а useCallback — что ссылка на функцию не меняется. Идеальное сочетание для постоянных ресурсов.
✅ Используйте useCallback + useRef для:
- WebSocket и долгоживущих соединений
- Web Workers, которые должны жить долго
- Сервисов, хранящих внутреннее состояние
- Optimization обработчиков событий
❌ Избегайте:
- Создания нового сервиса без ref
- Забывать cleanup в useEffect
- Использования useCallback без причины
- Передачи ref как пропс дочерним компонентам
Стабильная ссылка на сервис — это гарантия корректной работы!
Остальные продвинутые техники React - читай в статье ⬇️
📎 Статья
🎙 Новости
📝 База вопросов