اکنون در دسترس! پژوهش تلگرام ۲۰۲۵ — مهمترین بینشهای سال 
React
رفتن به کانال در Telegram
Подборки по React js и все что с ним связано. По всем вопросам @evgenycarter
نمایش بیشتر2 731
مشترکین
+124 ساعت
-77 روز
-1030 روز
آرشیو پست ها
2 731
Сегодня покажу вам, как в React удобно работать с формами на базе
react-hook-form. Это мой go-to инструмент для любых форм в проектах.
Почему именно react-hook-form?
- ⚡ Быстрее, чем Formik (нет лишних ререндеров)
- 🔍 Простая валидация через yup или zod
- 🔌 Легко интегрируется с UI-библиотеками (MUI, Ant Design, Tailwind)
Минималистичный пример:
import { useForm } from "react-hook-form";
export default function MyForm() {
const { register, handleSubmit } = useForm();
const onSubmit = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("email")} placeholder="Email" />
<input type="submit" />
</form>
);
}
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
const schema = yup.object({
email: yup.string().email().required(),
}).required();
export default function ValidatedForm() {
const { register, handleSubmit, formState: { errors } } = useForm({
resolver: yupResolver(schema),
});
return (
<form onSubmit={handleSubmit(data => console.log(data))}>
<input {...register("email")} />
<p>{errors.email?.message}</p>
<button type="submit">Отправить</button>
</form>
);
}
2 731
Как сделать loader с задержкой, чтобы не мигал?
Иногда при загрузке данных хочется показать спиннер, но только если это занимает больше, скажем, 300мс. Это позволяет избежать "мигающего" лоадера при быстрой загрузке. Я часто использую этот приём, особенно при загрузке модалок или переключении вкладок.
Вот простая реализация на React:
import { useState, useEffect } from "react";
function useDelayedLoader(isLoading: boolean, delay = 300) {
const [showLoader, setShowLoader] = useState(false);
useEffect(() => {
let timeout: ReturnType<typeof setTimeout>;
if (isLoading) {
timeout = setTimeout(() => setShowLoader(true), delay);
} else {
setShowLoader(false);
}
return () => clearTimeout(timeout);
}, [isLoading, delay]);
return showLoader;
}
const isLoading = ...; // например, из useQuery или useState
const showLoader = useDelayedLoader(isLoading);
return (
<>
{showLoader && <Spinner />}
{!isLoading && <Content />}
</>
);
2 731
Как frontend-разработчику получить оффер в Big Tech?
Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные.
Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK...
Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾
Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.В своем канале: 👉Разбираю самые популярные и каверзные вопросы на собесах 👉Рассказываю как пройти фильтр HR 👉Борюсь с убеждениями, которые мешают развиваться 👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров Регулярно публикую полезные материалы: ▪️100 вопросов, которые точно помогут тебе на собеседовании ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1 ▪️Чек лист проверки своего резюме Подписывайся, нас уже 4500 🤓: ссылка Реклама, erid: 2W5zFG9M9gD ИП Галактионов Тихон Витальевич, ИНН 771618975809
2 731
🚨 Избегай монолитных компонентов, которые объединяют в себе отображение, управление состоянием и конфигурацию (например, ID, ref'ы) — такие компоненты сложнее сопровождать, тестировать и переиспользовать.
✅ Вместо этого разделяй функциональность на составные (composable) компоненты и используй context для передачи конфигурации и состояния.
📲 Мы в MAX
✍️ @React_lib
2 731
🛠️ Оптимизация ререндеринга в React: 3 ключевых совета
Ререндеринг — один из главных "скрытых" врагов производительности в React. Если компонент ререндерится слишком часто, это может привести к лагам и снижению FPS в UI. Сегодня разберём три способа, как минимизировать ненужные ререндеры.
1️⃣ Используйте
React.memo
Если ваш компонент получает одинаковые пропсы и не должен ререндериться без изменений, оберните его в React.memo.
🔹 Пример:
const MyComponent = React.memo(({ count }: { count: number }) => {
console.log('Ререндер!');
return <div>Count: {count}</div>;
});
useCallback для функций
Передача новой функции в пропсы приводит к ререндерингу. useCallback предотвращает это:
🔹 Пример:
const handleClick = useCallback(() => {
console.log('Clicked!');
}, []);
handleClick не будет пересоздаваться при каждом ререндере.
3️⃣ Используйте useMemo для вычислений
Если у вас есть тяжёлые вычисления, мемоизируйте их с useMemo:
🔹 Пример:
const expensiveValue = useMemo(() => {
return calculateHeavyStuff(data);
}, [data]);
calculateHeavyStuff будет выполняться только при изменении data, а не при каждом ререндере.
📲 Мы в MAX
✍️ @React_lib2 731
🚀 Подборка полезных IT каналов в Max
Системное администрирование, DevOps 📌
https://max.ru/i_odmin Все для системного администратора
https://max.ru/bash_srv Bash Советы
https://max.ru/sysadminof Книги для админов, полезные материалы
https://max.ru/i_odmin_book Библиотека Системного Администратора
https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др.
1C разработка 📌
https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С
Программирование C++📌
https://max.ru/cpp_lib Библиотека C/C++ разработчика
Программирование Go📌
https://max.ru/golang_lib Библиотека Go (Golang) разработчика
Программирование React📌
https://max.ru/react_lib React
Программирование Python 📌
https://max.ru/python_of Python академия.
https://max.ru/BookPython Библиотека Python разработчика
Java разработка 📌
https://max.ru/bookjava Библиотека Java разработчика
GitHub Сообщество 📌
https://max.ru/githublib Интересное из GitHub
Базы данных (Data Base) 📌
https://max.ru/database_info Все про базы данных
Фронтенд разработка 📌
https://max.ru/frontend_1 Подборки для frontend разработчиков
Библиотеки 📌
https://max.ru/programmist_of Книги по программированию
https://max.ru/proglb Библиотека программиста
https://max.ru/bfbook Книги для программистов
Программирование 📌
https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций
https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT
https://max.ru/php_lib Библиотека PHP программиста 👨🏼💻👩💻
Шутки программистов 📌
https://max.ru/itumor Шутки программистов
Защита, взлом, безопасность 📌
https://max.ru/thehaking Канал о кибербезопасности
https://max.ru/xakkep_1 Хакер Free
Книги, статьи для дизайнеров 📌
https://max.ru/odesigners Статьи, книги для дизайнеров
Математика 📌
https://max.ru/Pomatematike Канал по математике
https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике
Вакансии 📌
https://max.ru/progjob Вакансии в IT
Мир технологий 📌
https://max.ru/mir_teh Канал для любознательных
Бонус 📌
https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга
https://max.ru/mockva_life Свежие новости Москвы
2 731
Сейчас покажу вам приём, который сильно упрощает React-код: не храните в state то, что можно вычислить.
Очень часто вижу такое:
const [fullName, setFullName] = useState('')
useEffect(() => {
setFullName(`${user.firstName} ${user.lastName}`)
}, [user])
useEffect и лишний ререндер.
Гораздо проще так:
const fullName = `${user.firstName} ${user.lastName}`
const filteredItems = useMemo(() => {
return items.filter(item => item.active)
}, [items])
useState.
Вот где особенно часто ошибаются:
• fullName из firstName и lastName
• isFormValid из значений формы
• sortedList из массива и сортировки
• visibleItems из фильтра и исходных данных
Чем меньше лишнего state в компоненте, тем спокойнее вам потом его дебажить.
📲 Мы в MAX
✍️ @React_lib2 731
🚀 Подборка полезных IT каналов в Max
Системное администрирование, DevOps 📌
https://max.ru/i_odmin Все для системного администратора
https://max.ru/bash_srv Bash Советы
https://max.ru/sysadminof Книги для админов, полезные материалы
https://max.ru/i_odmin_book Библиотека Системного Администратора
https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др.
1C разработка 📌
https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С
Программирование C++📌
https://max.ru/cpp_lib Библиотека C/C++ разработчика
Программирование Python 📌
https://max.ru/python_of Python академия.
https://max.ru/BookPython Библиотека Python разработчика
Java разработка 📌
https://max.ru/bookjava Библиотека Java разработчика
GitHub Сообщество 📌
https://max.ru/githublib Интересное из GitHub
Базы данных (Data Base) 📌
https://max.ru/database_info Все про базы данных
Фронтенд разработка 📌
https://max.ru/frontend_1 Подборки для frontend разработчиков
Библиотеки 📌
https://max.ru/programmist_of Книги по программированию
https://max.ru/proglb Библиотека программиста
https://max.ru/bfbook Книги для программистов
Программирование 📌
https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций
https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT
https://max.ru/php_lib Библиотека PHP программиста 👨🏼💻👩💻
Шутки программистов 📌
https://max.ru/itumor Шутки программистов
Защита, взлом, безопасность 📌
https://max.ru/thehaking Канал о кибербезопасности
https://max.ru/xakkep_1 Хакер Free
Книги, статьи для дизайнеров 📌
https://max.ru/odesigners Статьи, книги для дизайнеров
Математика 📌
https://max.ru/Pomatematike Канал по математике
https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике
Вакансии 📌
https://max.ru/progjob Вакансии в IT
Мир технологий 📌
https://max.ru/mir_teh Канал для любознательных
Бонус 📌
https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга
https://max.ru/mockva_life Свежие новости Москвы
2 731
💻Angular — один из самых строгих и системных инструментов разработки пользовательских интерфейсов. Его выбирают крупные компании, где важны масштабируемость, предсказуемость кода и возможность развивать продукт долгие годы. Мы расскажем вам как работать с этим инструментом. Записывайтесь на открытые уроки в преддверии старта курса «Angular-разработчик»:
📆26 марта в 20:00 МСК на открытом уроке разберём, как LLM ускоряют фронтенд-разработку. Покажем их развитие, подготовим Angular-проект к работе с ИИ, создадим приложение и обсудим, где ИИ реально помогает разработчику.
📆9 апреля в 20:00 МСК на открытом уроке разберём сигналы в Angular: создадим реактивную форму с валидацией, обсудим управление состоянием и сравним с подходом на RxJS.
📆21 апреля в 20:00 МСК разберём архитектуру Angular-приложения: слои, feature-подход, разделение UI, логики и API, а также паттерны и структуру реального проекта.
Подробности об уроках и регистрация: https://vk.cc/cVBtTH
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
2 731
🔧 Шпаргалка по базовым компонентам React
// Импорт React и роутера
import React, { useState, useEffect, createContext, useContext } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
// 1. Создание контекста
const MyContext = createContext();
// 2. Компонент с Context и useEffect
function Welcome() {
const contextValue = useContext(MyContext);
useEffect(() => {
console.log("Welcome component mounted or updated");
return () => console.log("Welcome component unmounted");
}, []);
return <h1>{contextValue}</h1>;
}
// 3. Управляемая форма
function FormComponent() {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => setInputValue(e.target.value);
return (
<div>
<h2>Controlled Form</h2>
<input type="text" value={inputValue} onChange={handleChange} />
<p>Input Value: {inputValue}</p>
</div>
);
}
// 4. Счётчик с состоянием и обработчиком
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Counter</h2>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
// 5. Рендер списка
function FruitList() {
const fruits = ['Apple', 'Banana', 'Orange'];
return (
<div>
<h2>Fruit List</h2>
<ul>
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
</div>
);
}
// 6. Условный рендеринг
function ConditionalRender({ isLoggedIn }) {
return (
<div>
<h2>Conditional Rendering</h2>
{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
</div>
);
}
// 7. Навигация
function Navigation() {
return (
<nav>
<Link to="/">Home</Link> | <Link to="/form">Form</Link> | <Link to="/counter">Counter</Link> | <Link to="/fruits">Fruits</Link>
</nav>
);
}
// 8. Основной App с Router и Context
function App() {
return (
<MyContext.Provider value="Hello, Context!">
<Router>
<div style={{ padding: '20px', fontFamily: 'Arial' }}>
<Navigation />
<Switch>
<Route path="/" exact>
<Welcome />
<ConditionalRender isLoggedIn={true} />
</Route>
<Route path="/form" component={FormComponent} />
<Route path="/counter" component={Counter} />
<Route path="/fruits" component={FruitList} />
</Switch>
</div>
</Router>
</MyContext.Provider>
);
}
export default App;
2 731
❌ Избегайте использования нескольких переменных состояния для отслеживания статуса.
✅ Вместо этого используйте перечисления (enums).
✍️ @React_lib
2 731
🚀 Подборка полезных IT каналов в Max
Системное администрирование, DevOps 📌
https://max.ru/i_odmin Все для системного администратора
https://max.ru/bash_srv Bash Советы
https://max.ru/sysadminof Книги для админов, полезные материалы
https://max.ru/i_odmin_book Библиотека Системного Администратора
https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др.
1C разработка 📌
https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С
Программирование C++📌
https://max.ru/cpp_lib Библиотека C/C++ разработчика
Программирование Python 📌
https://max.ru/python_of Python академия.
https://max.ru/BookPython Библиотека Python разработчика
Java разработка 📌
https://max.ru/bookjava Библиотека Java разработчика
GitHub Сообщество 📌
https://max.ru/githublib Интересное из GitHub
Базы данных (Data Base) 📌
https://max.ru/database_info Все про базы данных
Фронтенд разработка 📌
https://max.ru/frontend_1 Подборки для frontend разработчиков
Библиотеки 📌
https://max.ru/programmist_of Книги по программированию
https://max.ru/proglb Библиотека программиста
https://max.ru/bfbook Книги для программистов
Программирование 📌
https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций
https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT
https://max.ru/php_lib Библиотека PHP программиста 👨🏼💻👩💻
Шутки программистов 📌
https://max.ru/itumor Шутки программистов
Защита, взлом, безопасность 📌
https://max.ru/thehaking Канал о кибербезопасности
https://max.ru/xakkep_1 Хакер Free
Книги, статьи для дизайнеров 📌
https://max.ru/odesigners Статьи, книги для дизайнеров
Математика 📌
https://max.ru/Pomatematike Канал по математике
https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике
Вакансии 📌
https://max.ru/progjob Вакансии в IT
Мир технологий 📌
https://max.ru/mir_teh Канал для любознательных
Бонус 📌
https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга
https://max.ru/mockva_life Свежие новости Москвы
2 731
Сегодня написал пост на тему, которая регулярно бьёт по скорости разработки: почему React-приложение “тормозит”, даже когда кажется, что код нормальный.
Часто вижу одну и ту же ситуацию:
компонент маленький, логика простая, данных немного, а интерфейс всё равно начинает дёргаться. Особенно в формах, таблицах и списках.
Обычно проблема не в React как таковом. Проблема в том, что мы слишком поздно начинаем смотреть что именно ререндерится.
Вот 3 вещи, которые я первым делом проверяю:
1. Родитель слишком “шумный”
Если родительский компонент часто обновляет state, все дочерние компоненты тоже могут улетать в ререндер.
Даже если визуально ничего не меняется.
2.
useMemo и useCallback не спасают автоматически
Их часто добавляют “на всякий случай”, но без понимания, где узкое место.
В итоге код становится сложнее, а пользы - ноль.
3. Ключи в списках
Нестабильные key - классика.
Если в списке стоит index, React может пересоздавать элементы там, где не должен.
Особенно больно это ощущается в интерактивных списках.
Мой рабочий подход простой:
• сначала открываю React DevTools Profiler
• нахожу, какой компонент ререндерится чаще всего
• проверяю, это реально нужно или нет
• только потом оптимизирую
Главная мысль:
не оптимизируйте React вслепую.
Сначала найдите источник лишних ререндеров.
Очень часто после этого оказывается, что фикс занимает 5 минут, а не 2 часа.
✍️ @React_lib2 731
Этот пост выкуплен под рекламную интеграцию.
Но здесь будут скрины от участников frontend-менторства Тихона Галактионова и подборка полезных материалов:👉100 вопросов, которые точно помогут тебе на собеседовании: ссылка 👉Подборка из 100+ каналов с вакансиями для разработчиков: ссылка 👉10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS: ссылка 👉Чек лист проверки своего резюме: ссылка 👉Разбор самых популярных и каверзных вопросов на собесах: ссылка 👉Лайфхак как аккуратно “пинговать” рекрутеров: ссылка Ссылка на канал Тихона, там же можно найти больше материалов для подготовки к собеседованиям в Big Tech: ссылка Реклама, erid: 2W5zFH1z9Xo ИП Галактионов Тихон Витальевич, ИНН 771618975809
2 731
Почему React-приложение “лагает” при вводе в инпут - и как починить за 3 минуты
Сегодня покажу классическую ситуацию: у тебя есть форма/поиск, ты печатаешь и интерфейс начинает подтормаживать. Чаще всего причина одна: на каждый
onChange ты триггеришь тяжёлый ререндер (фильтрация, сортировка, построение списков, пересчёт графиков, сложные компоненты).
Быстрая диагностика
1. Открой React DevTools → Profiler
2. Запиши ввод в поле
3. Посмотри, кто ререндерится и сколько времени занимает
Три быстрых фикса (по популярности)
1) useDeferredValue для “тяжёлого” поиска
• Инпут обновляется мгновенно
• Тяжёлая часть догоняет “в фоне”
Идея: рендер списка завязываем не на query, а на deferredQuery.
2) useMemo для вычислений
Если делаешь filter/sort/map по большому массиву - мемоизируй результат по зависимостям.
3) Разделяй состояние
Частая ошибка: держать “всё” в одном компоненте.
Инпут сверху - список снизу. Если список тяжёлый, вынеси его в отдельный компонент + memo.
Мини-чеклист
• Есть ли тяжёлые вычисления в рендере?
• Ререндерится ли список при каждом вводе?
• Можно ли “отложить” вычисление (deferred)?
• Можно ли кешировать (memo)?
• Можно ли изолировать компонент?
✍️ @React_lib2 731
В React дублирование редко выглядит как «копипаста». Чаще это клоны useEffect + useState, размазанные по компонентам, которые внезапно начинают жить своей жизнью: лишние перерендеры, гонки запросов, утечки подписок и логика, которую невозможно нормально протестировать и переиспользовать.
17 февраля в 20:00 МСК на открытом вебинаре OTUS разберём custom hooks как способ выносить и переиспользовать логику без усложнения кода. На практике превратим повторяющийся useEffect + useState в переиспользуемый хук, соберём несколько рабочих хуков (данные, состояния, события), разберём типичные ошибки и покажем, как hooks реально упрощают архитектуру React-приложений.
В итоге вы будете понимать, когда выносить логику в custom hook, как проектировать API хука, как переиспользовать логику без копипаста и почему это один из ключевых навыков уровня middle.
Урок проходит в преддверии старта курса «React.js Developer».
Регистрируйтесь: https://vk.cc/cUkVak
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
2 731
❌ Избегайте «прокидывания» пропсов (prop-drilling) для расширения компонентов
✅ Вместо этого используйте композицию
✍️ @React_lib
2 731
useMemo и useCallback - когда они реально помогают, а когда вредят
Сегодня разберём больную тему: “обмазался мемоизацией - стало хуже”.
Когда useMemo/useCallback НЕ нужны
🔹Значение/функция не передаются в memo - компоненты и не используются как deps.
🔹Вычисление дешёвое (например, arr.map на 20 элементов).
🔹Ты добавил их “на всякий случай”.
Побочный эффект: ты усложняешь код и добавляешь лишнюю работу React (хранить кеш, сравнивать deps).
Когда они реально спасают
1. Стабильные пропсы для React.memo
const onSelect = React.useCallback((id) => {
setSelected(id);
}, []);
const filtered = React.useMemo(() => heavyFilter(items, query), [items, query]);
const params = React.useMemo(() => ({ q: query, page }), [query, page]);
memo?
🔹Или это просто “красивее выглядит”?
✍️ @React_lib2 731
Как frontend-разработчику получить оффер в Big Tech?
Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные.
Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK...
Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾
Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.В своем канале: 👉Разбираю самые популярные и каверзные вопросы на собесах 👉Рассказываю как пройти фильтр HR 👉Борюсь с убеждениями, которые мешают развиваться 👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров Регулярно публикую полезные материалы: ▪️60 вопросов, которые точно помогут тебе на собеседовании. ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1 ▪️Чек лист проверки своего резюме Подписывайся, нас уже 4500 🤓: ссылка Реклама, erid 2W5zFK9zMoW: ИП Галактионов Тихон Витальевич, ИНН 771618975809
2 731
Как перестать страдать с зависимостями в
useEffect
Сегодня покажу приём, который резко снижает боль от “почему эффект снова сработал” и “ESLint ругается на deps”.
Типичный кейс: в useEffect ты подписываешься на что-то и используешь колбэк/данные, которые постоянно меняются → эффект перезапускается, подписки пересоздаются.
Решение: “стабильный эффект + актуальные данные через ref”
Идея простая:
🔹эффект запускается редко (или 1 раз),
🔹а внутри всегда используются самые свежие значения через ref.
Пример (мини-хук):
function useLatest(value) {
const ref = React.useRef(value);
React.useEffect(() => { ref.current = value; }, [value]);
return ref;
}
const onMessageLatest = useLatest(onMessage);
React.useEffect(() => {
const unsub = socket.subscribe((msg) => {
onMessageLatest.current(msg);
});
return unsub;
}, []); // подписка не пересоздаётся
