React
الذهاب إلى القناة على Telegram
Подборки по React js и все что с ним связано. По всем вопросам @evgenycarter
إظهار المزيد
الشبكة:2 663
المشتركون
-124 ساعات
-67 أيام
-1830 أيام
جاري تحميل البيانات...
القنوات المماثلة
![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.tlmtr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=96&q=75){kind=small}
سحابة العلامات
الإشارات الواردة والصادرة
---
---
---
---
---
---
جذب المشتركين
سبتمبر '26
سبتمبر '26
+5
في 0 قنوات
أغسطس '26
+15
في 0 قنوات
Get PRO
يوليو '26
+13
في 0 قنوات
Get PRO
يونيو '26
+16
في 0 قنوات
Get PRO
مايو '26
+28
في 0 قنوات
Get PRO
أبريل '26
+17
في 0 قنوات
Get PRO
مارس '26
+12
في 0 قنوات
Get PRO
فبراير '26
+21
في 0 قنوات
Get PRO
يناير '26
+21
في 0 قنوات
Get PRO
ديسمبر '25
+28
في 0 قنوات
Get PRO
نوفمبر '25
+45
في 32 قنوات
Get PRO
أكتوبر '25
+31
في 0 قنوات
Get PRO
سبتمبر '25
+56
في 37 قنوات
Get PRO
أغسطس '25
+37
في 1 قنوات
Get PRO
يوليو '25
+51
في 27 قنوات
Get PRO
يونيو '25
+66
في 20 قنوات
Get PRO
مايو '25
+55
في 44 قنوات
Get PRO
أبريل '25
+56
في 37 قنوات
Get PRO
مارس '25
+86
في 38 قنوات
Get PRO
فبراير '25
+72
في 32 قنوات
Get PRO
يناير '25
+69
في 33 قنوات
Get PRO
ديسمبر '24
+71
في 34 قنوات
Get PRO
نوفمبر '24
+79
في 33 قنوات
Get PRO
أكتوبر '24
+80
في 30 قنوات
Get PRO
سبتمبر '24
+141
في 29 قنوات
Get PRO
أغسطس '24
+67
في 18 قنوات
Get PRO
يوليو '24
+51
في 0 قنوات
Get PRO
يونيو '24
+82
في 25 قنوات
Get PRO
مايو '24
+89
في 19 قنوات
Get PRO
أبريل '24
+76
في 0 قنوات
Get PRO
مارس '24
+88
في 21 قنوات
Get PRO
فبراير '24
+73
في 19 قنوات
Get PRO
يناير '24
+147
في 24 قنوات
Get PRO
ديسمبر '23
+91
في 24 قنوات
Get PRO
نوفمبر '23
+94
في 17 قنوات
Get PRO
أكتوبر '23
+90
في 18 قنوات
Get PRO
سبتمبر '23
+123
في 0 قنوات
Get PRO
أغسطس '23
+88
في 0 قنوات
Get PRO
يوليو '23
+112
في 0 قنوات
Get PRO
يونيو '23
+67
في 0 قنوات
Get PRO
مايو '23
+92
في 0 قنوات
Get PRO
أبريل '23
+81
في 0 قنوات
Get PRO
مارس '23
+42
في 0 قنوات
Get PRO
فبراير '23
+53
في 0 قنوات
Get PRO
يناير '23
+93
في 0 قنوات
Get PRO
ديسمبر '22
+99
في 0 قنوات
Get PRO
نوفمبر '22
+68
في 0 قنوات
Get PRO
أكتوبر '22
+160
في 0 قنوات
Get PRO
سبتمبر '22
+232
في 0 قنوات
Get PRO
أغسطس '22
+314
في 0 قنوات
Get PRO
يوليو '22
+408
في 0 قنوات
Get PRO
يونيو '22
+2 238
في 0 قنوات
| التاريخ | نمو المشتركين | الإشارات | القنوات | |
| 16 سبتمبر | 0 | |||
| 15 سبتمبر | 0 | |||
| 14 سبتمبر | 0 | |||
| 13 سبتمبر | 0 | |||
| 12 سبتمبر | 0 | |||
| 11 سبتمبر | +3 | |||
| 10 سبتمبر | 0 | |||
| 09 سبتمبر | 0 | |||
| 08 سبتمبر | 0 | |||
| 07 سبتمبر | +1 | |||
| 06 سبتمبر | 0 | |||
| 05 سبتمبر | 0 | |||
| 04 سبتمبر | 0 | |||
| 03 سبتمبر | +1 | |||
| 02 سبتمبر | 0 | |||
| 01 سبتمبر | 0 |
منشورات القناة
🚨 Избегай монолитных компонентов, которые объединяют в себе отображение, управление состоянием и конфигурацию (например, ID, ref'ы) — такие компоненты сложнее сопровождать, тестировать и переиспользовать.
✅ Вместо этого разделяй функциональность на составные (composable) компоненты и используй context для передачи конфигурации и состояния.
📲 Мы в MAX
✍️ @React_lib
| 2 |  ❌ Избегайте использования нескольких переменных состояния для отслеживания статуса.
✅ Вместо этого используйте перечисления (enums).
📲 Мы в MAX
✍️ @React_lib | 425 |
| 3 | Сегодня написал пост на тему, которая регулярно бьёт по скорости разработки: почему React-приложение “тормозит”, даже когда кажется, что код нормальный.
Часто вижу одну и ту же ситуацию:
компонент маленький, логика простая, данных немного, а интерфейс всё равно начинает дёргаться. Особенно в формах, таблицах и списках.
Обычно проблема не в React как таковом. Проблема в том, что мы слишком поздно начинаем смотреть что именно ререндерится.
Вот 3 вещи, которые я первым делом проверяю:
1. Родитель слишком “шумный”
Если родительский компонент часто обновляет state, все дочерние компоненты тоже могут улетать в ререндер.
Даже если визуально ничего не меняется.
2. useMemo и useCallback не спасают автоматически
Их часто добавляют “на всякий случай”, но без понимания, где узкое место.
В итоге код становится сложнее, а пользы - ноль.
3. Ключи в списках
Нестабильные key - классика.
Если в списке стоит index, React может пересоздавать элементы там, где не должен.
Особенно больно это ощущается в интерактивных списках.
Мой рабочий подход простой:
• сначала открываю React DevTools Profiler
• нахожу, какой компонент ререндерится чаще всего
• проверяю, это реально нужно или нет
• только потом оптимизирую
Главная мысль:
не оптимизируйте React вслепую.
Сначала найдите источник лишних ререндеров.
Очень часто после этого оказывается, что фикс занимает 5 минут, а не 2 часа.
📲 Мы в MAX
✍️ @React_lib | 548 |
| 4 |  ❌ Избегайте «прокидывания» пропсов (prop-drilling) для расширения компонентов
✅ Вместо этого используйте композицию
📲 Мы в MAX
✍️ @React_lib | 566 |
| 5 | 🚀 Подборка полезных 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 и др.
https://max.ru/tipsysdmin Типичный Сисадмин
https://max.ru/channel_win_sysadmin Системный Администратор Windows
https://max.ru/channel_linux_admin Linux: Системный администратор
https://max.ru/channel_linuxmod Linux
https://max.ru/channel_i_linux Системный администратор
https://max.ru/channel_devopslib DevOps, SRE, Sysadmin
https://max.ru/channel_devops_star DevOps Star (Звезда Девопса)
Excel лайфхак 📌
https://t.me/Excel_lifehack Excel лайфхак
Английский с нуля 🇬🇧
https://max.ru/UchuEnglish
1C разработка 📌
https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С
https://max.ru/channel_DevLab1C 1С:Предприятие 8
Программирование C++📌
https://max.ru/cpp_lib Библиотека C/C++ разработчика
https://max.ru/channel_cpp_geek C++ geek
Программирование Go📌
https://max.ru/golang_lib Библиотека Go (Golang) разработчика
Программирование React📌
https://max.ru/react_lib React
Программирование Rust📌
https://max.ru/channel_rust_lib
Программирование Python 📌
https://max.ru/python_of Python академия.
https://max.ru/BookPython Библиотека Python разработчика
Java разработка 📌
https://max.ru/bookjava Библиотека Java разработчика
https://max.ru/channel_java_geek Java Geek
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 Обучающие видео, книги по Физике и Математике
Вакансии в IT📌
https://max.ru/progjob
https://max.ru/channel_rabotait
Мир технологий 📌
https://max.ru/mir_teh Канал для любознательных
Городские📌
https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга
https://max.ru/mockva_life Свежие новости Москвы
https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП
https://max.ru/channel_krasnodar_novosty Краснодар Новости
https://max.ru/channel_novosibirsk_novosti Новосибирск
https://max.ru/channel_samara_novosti Новости Самары
https://max.ru/channel_ekaterinburg_novosti Новости Екатеринбурга
https://max.ru/channel_kazan_novosti Новости Казани
https://max.ru/channel_omsk_novosti Новости Омска
https://max.ru/channel_moskva_24 Москва 24 | 491 |
| 6 | ⚛️ Реактивность - это просто (и всего 35 строк кода)
Мы часто воспринимаем реактивность в современных фреймворках (Vue, Solid, MobX или Preact Signals) как некую "магию". Кажется, что под капотом там сложные механизмы, доступные только избранным архитекторам.
Автор блога romgrk решил развеять этот миф и показал, что базовый движок реактивности можно реализовать буквально за 35 строчек кода.
В статье «Reactivity is easy» он разбирает ключевые концепции:
🔹 Signals (Сигналы) — контейнеры для значений.
🔹 Effects (Эффекты) — функции, которые реагируют на изменения.
🔹 Dependency Tracking — как именно эффект "узнает", на какие сигналы он подписан (спойлер: через глобальный контекст).
Отличный материал для тех, кто хочет перестать бояться "магии" стейт-менеджеров и понять, как всё работает на уровне чистого JS.
👉 Читать статью: https://romgrk.com/posts/reactivity-is-easy
#js #frontend #reactivity #architecture
📲 Мы в MAX
✍️ @React_lib | 398 |
| 7 |  Сегодня хочу поговорить про типичную боль React-разработчиков - лишние ререндеры.
Я регулярно вижу код, где приложение «тормозит», хотя логика простая. В 80% случаев причина банальна: компоненты перерисовываются без необходимости.
Что я проверяю в первую очередь
1️⃣ props меняются по ссылке
<Component data={{ a: 1 }} />
Каждый рендер - новый объект → новый ререндер.
Решение: useMemo.
2️⃣ функции создаются заново
onClick={() => doSomething()}
Если компонент обёрнут в memo - он всё равно будет ререндериться.
Решение: useCallback.
3️⃣ memo используется «для галочки»
React.memo без анализа - зло.
Если props всегда новые → memo бесполезен и даже мешает.
4️⃣ state лежит слишком высоко
Когда useState в родителе, а нужен только одному дочернему компоненту - привет лишним обновлениям.
Мой личный чек-лист
- Сначала DevTools → Highlight updates
- Потом проверяю ссылки
- И только в конце - memo, useMemo, useCallback
⚠️ Важно: оптимизация, это не рефлекс, а осознанный шаг. Сначала простота, потом скорость.
📲 Мы в MAX
✍️ @React_lib | 467 |
| 8 | 🚀 Подборка полезных 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 и др.
https://max.ru/tipsysdmin Типичный Сисадмин
https://max.ru/channel_win_sysadmin Системный Администратор Windows
https://max.ru/channel_linux_admin Linux: Системный администратор
https://max.ru/channel_linuxmod Linux
https://max.ru/channel_i_linux Системный администратор
https://max.ru/channel_devopslib DevOps, SRE, Sysadmin
https://max.ru/channel_devops_star DevOps Star (Звезда Девопса)
Excel лайфхак 📌
https://t.me/Excel_lifehack Excel лайфхак
Английский с нуля 🇬🇧
https://max.ru/UchuEnglish
1C разработка 📌
https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С
https://max.ru/channel_DevLab1C 1С:Предприятие 8
Программирование C++📌
https://max.ru/cpp_lib Библиотека C/C++ разработчика
https://max.ru/channel_cpp_geek C++ geek
Программирование Go📌
https://max.ru/golang_lib Библиотека Go (Golang) разработчика
Программирование React📌
https://max.ru/react_lib React
Программирование Rust📌
https://max.ru/channel_rust_lib
Программирование Python 📌
https://max.ru/python_of Python академия.
https://max.ru/BookPython Библиотека Python разработчика
Java разработка 📌
https://max.ru/bookjava Библиотека Java разработчика
https://max.ru/channel_java_geek Java Geek
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 Обучающие видео, книги по Физике и Математике
Вакансии в IT📌
https://max.ru/progjob
https://max.ru/channel_rabotait
Мир технологий 📌
https://max.ru/mir_teh Канал для любознательных
Городские📌
https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга
https://max.ru/mockva_life Свежие новости Москвы
https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП
https://max.ru/channel_krasnodar_novosty Краснодар Новости
https://max.ru/channel_novosibirsk_novosti Новосибирск
https://max.ru/channel_samara_novosti Новости Самары
https://max.ru/channel_ekaterinburg_novosti Новости Екатеринбурга
https://max.ru/channel_kazan_novosti Новости Казани
https://max.ru/channel_omsk_novosti Новости Омска
https://max.ru/channel_moskva_24 Москва 24 | 463 |
| 9 | ![🔥 Антипаттерн в React: избыточные зависимости useEffect Встречали такое? useEffect(() => { fetchData(id); }, [id, fetchData]](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDACgcHiMeGSgjISMtKygwPGRBPDc3PHtYXUlkkYCZlo+AjIqgtObDoKrarYqMyP/L2u71////m8H////6/+b9//j/2wBDASstLTw1PHZBQXb4pYyl+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj/wAARCAAmACgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwCrLJJ5jfOwG496Z5r/APPRvzNLJ/rX/wB49qYVHr+lUSkO81/+ejfnSGZ/77fnSbR6n8qMD+9+lA7IfHK5kX5z1Heimx481ee4oqkZySuLJjzHz/eNM496fJnzX6feNN59qk0Ww3iinc+1Ic47UALH/rV+oooj/wBYv1FFUiJ7k7xOJHwRyaZ5UnqtFFFhJsDDJ3YfnSeS/qPzooosO7FSF/MUkjr60UUVSREmz//Z){kind=small} 🔥 Антипаттерн в React: избыточные зависимости useEffect
Встречали такое?
useEffect(() => {
fetchData(id);
}, [id, fetchData]);
❗️Проблема: fetchData — это функция, которая переопределяется при каждом рендере. В итоге эффект срабатывает чаще, чем должен, даже если id не менялся.
👎 Это вызывает лишние запросы, лаги и баги в логике.
💡 Решения:
1. Обёрнуть в useCallback:
const fetchData = useCallback((id: string) => {
// ...
}, []);
2. Вынести вне компонента (если она не зависит от состояния):
const fetchData = (id: string) => {
// ...
};
3. Игнорировать в зависимостях (как временный хак, но осторожно!):
// eslint-disable-next-line react-hooks/exhaustive-deps
✅ Правильное управление зависимостями в useEffect — ключ к стабильному и предсказуемому поведению компонентов.
📲 Мы в MAX
✍️ @React_lib | 439 |
| 10 | 🚀 Что такое условный рендеринг в React и зачем он нужен?
Если говорить просто, условный рендеринг - это способность вашего React-приложения решать, что именно показывать пользователю в зависимости от определенных условий (состояния, пропсов и т.д.).
Думайте об этом как о "if... else...", но для вашего пользовательского интерфейса (UI).
- ЕСЛИ пользователь вошел в систему, ТО показать компонент <UserProfile />.
- ИНАЧЕ показать компонент <LoginForm />.
💡 Для чего он нужен?
Без условного рендеринга все наши приложения были бы статичными. Именно эта концепция делает интерфейс динамическим, "живым" и отзывчивым.
Он нужен буквально повсюду. Вот самые частые примеры:
- Пока идет загрузка данных с сервера: Мы показываем <Spinner /> (крутилку). Как только данные пришли — показываем <DataList />.
- Аутентификация: Показываем "Профиль", если isLoggedIn === true, и "Войти", если isLoggedIn === false.
- Обработка ошибок: Если при загрузке произошла ошибка, мы показываем <ErrorMessage /> вместо контента.
- Пустые состояния: Показываем "Ваша корзина пуста", если cart.items.length === 0, и список товаров, если в ней что-то есть.
- Интерактив: Показ/скрытие модальных окон, выпадающих меню или вкладок по клику.
🛠️ Как это сделать?
В React есть несколько популярных способов:
1. Тернарный оператор (? :) - самый частый выбор.
{isLoading ? <Spinner /> : <Content />}
2. Логический оператор "И" (&&) - идеален, когда вам нужно что-то показать или не показать ничего (нет ветки "else").
{hasMessages && <NotificationBadge />}
3. Обычный if/else - используется внутри тела компонента, до return, для более сложной логики.
Условный рендеринг - это не просто "фича", это сам смысл React. Это то, что позволяет вашему UI реагировать на изменения данных и действия пользователя.
#React #JavaScript #Frontend #Development #ConditionalRendering
📲 Мы в MAX
✍️ @React_lib | 417 |
| 11 | Кастомные хуки (Custom Hooks). Создаем свой первый кастомный хук useWindowSize
Сегодня напишем простой, но очень полезный хук - useWindowSize. Он будет отслеживать ширину и высоту окна браузера. Это пригодится, если вам нужно менять верстку (например, скрывать сайдбар) при изменении размера экрана.
Мы создадим функцию, которая:
1. Использует useState для хранения размеров.
2. Использует useEffect для подписки на событие resize.
3. Важно: Не забываем удалять обработчик событий (cleanup function), чтобы не нагружать память!
Вот готовый пример. Можете сохранить его в файл useWindowSize.js.
import { useState, useEffect } from 'react';
// Наш кастомный хук
function useWindowSize() {
// 1. Инициализируем состояние
const [windowSize, setWindowSize] = useState({
width: undefined,
height: undefined,
});
useEffect(() => {
// Функция для обновления состояния
function handleResize() {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
}
// Устанавливаем размер сразу при загрузке
handleResize();
// 2. Добавляем слушатель события изменения размера окна
window.addEventListener("resize", handleResize);
// 3. Очистка: удаляем слушатель при размонтировании
return () => window.removeEventListener("resize", handleResize);
}, []); // Пустой массив зависимостей = запускаем один раз
return windowSize;
}
export default useWindowSize;
🚀 Как это использовать в компоненте?
Теперь ваш компонент становится чистым и понятным. Никакой лишней логики внутри!
import React from 'react';
import useWindowSize from './useWindowSize';
const App = () => {
// Просто вызываем наш хук
const { width, height } = useWindowSize();
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>📏 Размер окна</h1>
<p>Ширина: <strong>{width}px</strong></p>
<p>Высота: <strong>{height}px</strong></p>
{width < 600 ? (
<p>📱 Похоже, вы на мобильном устройстве!</p>
) : (
<p>💻 Это десктопная версия.</p>
)}
</div>
);
};
export default App;
📲 Мы в MAX
✍️ @React_lib | 453 |
| 12 | 🎯 Сегодня покажу вам простой, но мощный приём: как ускорить React-приложение с помощью мемоизации списков
Каждый из нас рендерит списки: товары, заявки, комментарии, юзеров - список бесконечен.
И одна из самых частых проблем: каждый элемент списка перерендеривается даже при минимальном изменении родителя.
Сегодня разбираем реальный кейс и решение, которое спасает производительность.
🔥 Проблема
У нас есть список задач, и при обновлении одной задачи - перерендериваются все элементы списка.
Визуально это незаметно, но при больших списках производительность падает.
Причина проста: у каждого элемента меняется ссылка на props → компонент считается обновлённым → React перерендеривает его.
💡 Решение: React.memo + useCallback
Вот минимальный рабочий пример.
Компонент элемента списка
const TaskItem = React.memo(function TaskItem({ task, onToggle }) {
console.log("Render:", task.title);
return (
<div>
<input
type="checkbox"
checked={task.done}
onChange={() => onToggle(task.id)}
/>
{task.title}
</div>
);
});
Родитель
function TaskList() {
const [tasks, setTasks] = useState(data);
const toggle = useCallback(id => {
setTasks(prev =>
prev.map(t => (t.id === id ? { ...t, done: !t.done } : t))
);
}, []);
return tasks.map(task => (
<TaskItem key={task.id} task={task} onToggle={toggle} />
));
}
🚀 Что это даёт?
- React.memo не даст компоненту перерендериться без изменения реальных данных.
- useCallback создаёт стабильную ссылку на функцию.
- Итог: перерендерятся только изменённые элементы, остальное остаётся нетронутым.
При 500+ элементах разница ощущается моментально.
📲 Мы в MAX
✍️ @React_lib | 403 |
| 13 | 🚀 Подборка полезных 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 и др.
https://max.ru/tipsysdmin Типичный Сисадмин
https://max.ru/channel_win_sysadmin Системный Администратор Windows
https://max.ru/channel_linux_admin Linux: Системный администратор
https://max.ru/channel_linuxmod Linux
https://max.ru/channel_i_linux Системный администратор
https://max.ru/channel_devopslib DevOps, SRE, Sysadmin
https://max.ru/channel_devops_star DevOps Star (Звезда Девопса)
Excel лайфхак 📌
https://t.me/Excel_lifehack Excel лайфхак
Английский с нуля 🇬🇧
https://max.ru/UchuEnglish
1C разработка 📌
https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С
https://max.ru/channel_DevLab1C 1С:Предприятие 8
Программирование C++📌
https://max.ru/cpp_lib Библиотека C/C++ разработчика
https://max.ru/channel_cpp_geek C++ geek
Программирование Go📌
https://max.ru/golang_lib Библиотека Go (Golang) разработчика
Программирование React📌
https://max.ru/react_lib React
Программирование Rust📌
https://max.ru/channel_rust_lib
Программирование Python 📌
https://max.ru/python_of Python академия.
https://max.ru/BookPython Библиотека Python разработчика
Java разработка 📌
https://max.ru/bookjava Библиотека Java разработчика
https://max.ru/channel_java_geek Java Geek
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 Обучающие видео, книги по Физике и Математике
Вакансии в IT📌
https://max.ru/progjob
https://max.ru/channel_rabotait
Мир технологий 📌
https://max.ru/mir_teh Канал для любознательных
Бонус 📌
https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга
https://max.ru/mockva_life Свежие новости Москвы
https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП | 374 |
| 14 |  Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании?
На фото ребята из моего комьюнити, где уже больше 220 frontend-разработчиков. Все они успешно устроились в крутые компании и получили офферы от 300 тыс рублей 🫂
👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке.
В их жизни больше нет бесконечных скучных созвонов, безуспешных откликов на вакансии, странноватых собесов с вопросами словно ты на олимпиаде.
И у тебя тоже получится 😎
У меня есть канал, где я:
👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения
👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти
👉 На примерах показываю, как проходить собеседования, включая техничку
👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров
И регулярно выкладываю полезное:
▪️ Задачи, на которых валятся кандидаты
▪️ Подборка из 100+ каналов с вакансиями для разработчиков
▪️ 100 вопросов, которые помогут тебе на собеседовании
▪️ Чек-лист для проверки своего резюме
Подписывайся: https://t.me/+yKkCEerQCzRmZjY6
Реклама, erid: 2W5zFHYzE6u ИП Галактионов Тихон Витальевич, ИНН 771618975809 | 401 |
| 15 | 🧠 Сегодня я покажу вам трюк, который ускоряет ре-рендеры в React на реальных проектах
Иногда компонент начинает перерендериваться слишком часто, даже когда его пропсы не меняются. Особенно это заметно в списках, формах и сложных UI.
Сегодня я расскажу, как я на проектах использую мемоизацию коллбеков и данных, чтобы UI перестал «дергаться».
🔥 Проблема
Допустим, есть список элементов, и каждый элемент получает проп onSelect, который создаётся при каждом рендере родителя:
const handleSelect = id => {
setSelected(id);
};
Каждый раз новая функция → дочерние элементы думают, что проп изменился → ненужный ререндер.
✅ Решение
Используйте useCallback:
const handleSelect = useCallback((id) => {
setSelected(id);
}, []);
Но самое интересное - часто хватает мемоизации не всех, а только “горячих” функций.
Я обычно включаю профайлер, смотрю самые частые ререндеры и мемоизирую только узкие места. Так производительность улетает вверх без лишнего усложнения кода.
🎯 Практическое правило, которое я использую
Мемоизируйте только то, что реально ререндерится слишком часто.
Слепая мемоизация = грязный код.
📲 Мы в MAX
✍️ @React_lib | 422 |
| 16 | Почему useEffect - это не костыль, а инструмент, и как им не надо пользоваться 😅
Очень часто вижу в коде:
useEffect(() => {
fetchData();
}, []);
и всё вроде бы ок… пока не появляется зависимость, вроде userId, и кто-то лениво добавляет её в массив зависимостей, не понимая, что произойдёт при каждом изменении.
👉 Проблема не в useEffect - а в том, что мы не до конца понимаем его модель.
useEffect = реакция на изменение состояния.
Если у тебя эффект, который не зависит от UI - например, загрузка данных - вынеси его в кастомный хук или вообще за пределы компонента.
Например:
function useUser(userId) {
const [user, setUser] = useState(null);
useEffect(() => {
let ignore = false;
async function load() {
const data = await fetch(`/api/user/${userId}`).then(r => r.json());
if (!ignore) setUser(data);
}
load();
return () => (ignore = true);
}, [userId]);
return user;
}
Теперь у тебя эффект чистый, изолированный и переиспользуемый.
Компонент не знает ничего про загрузку - он просто получает user.
💡 Маленький лайфхак: если ты пишешь эффект и не можешь объяснить словами, почему он зависит от этих переменных - скорее всего, архитектура требует пересмотра, а не новый костыль в useEffect.
📲 Мы в MAX
✍️ @React_lib | 567 |
| 17 |  ⚛️ Я собрал визуализацию того, как работает процесс рендеринга в React
Надеюсь, она поможет вам понять этот процесс и позволит лучше предсказывать и контролировать изменения UI.
Trigger → Render → Commit
📲 Мы в MAX
✍️ @React_lib | 514 |
| 18 | ❌ Избегайте использования нескольких переменных состояния для отслеживания статуса.
✅ Вместо этого используйте перечисления (enums).
📲 Мы в MAX
✍️ @React_lib | 682 |
| 19 |  Custom Hooks
Часто мы пишем один и тот же код в разных компонентах: работа с localStorage, отслеживание размеров окна, дебаунс запросов. И вот тут кастомные хуки реально спасают.
Например, простой хук для работы с localStorage 👇
import { useState } from "react";
function useLocalStorage<T>(key: string, initialValue: T) {
const [value, setValue] = useState<T>(() => {
const stored = localStorage.getItem(key);
return stored ? JSON.parse(stored) : initialValue;
});
const setStoredValue = (newValue: T) => {
setValue(newValue);
localStorage.setItem(key, JSON.stringify(newValue));
};
return [value, setStoredValue] as const;
}
export default useLocalStorage;
Теперь можно использовать так:
const [theme, setTheme] = useLocalStorage("theme", "light");
🔥 Плюсы:
- код становится чище и переиспользуемым;
- избавляемся от дублирования логики;
- легко тестировать и поддерживать.
Я заметил, что когда начинаешь собирать библиотеку своих хуков, разработка ускоряется в разы. Советую прямо сегодня завести папку hooks и складывать туда такие полезности.
📲 Мы в MAX
✍️ @React_lib | 709 |
| 20 | React Developer Learning Roadmap
|-- Core Web Fundamentals
| |-- HTML & Semantic Elements
| |-- CSS Basics: Selectors, Properties
| |-- Box Model: Margin, Padding, Border
| |-- Layout Systems: Flexbox, CSS Grid
| |-- Responsive Design & Media Queries
| |-- CSS Preprocessors (SASS, LESS)
| |-- CSS Architecture Patterns (BEM, SMACSS)
|-- JavaScript Deep Dive
| |-- Syntax, Variables & Data Types
| |-- Operators & Expressions
| |-- Control Flow (if-else, switch)
| |-- Loops (for, while, do-while)
| |-- Functions, Arrow Functions
| |-- Scope, Closures & Hoisting
| |-- Error Handling & Debugging
|-- DOM & Browser APIs
| |-- Element Selection & Manipulation
| |-- Event Handling
| |-- Working with Forms & Validations
| |-- Fetch API / AJAX
| |-- Web Storage (localStorage, sessionStorage)
|-- Modern JavaScript & Tooling
| |-- ES6+ Features: let/const, spread/rest, destructuring, modules
| |-- Transpiling (Babel)
| |-- Bundlers: Webpack, Rollup, Parcel
| |-- Module Systems: ES Modules, CommonJS
|-- Version Control & Workflow
| |-- Git Fundamentals: commit, branch, merge
| |-- Hosting: GitHub, GitLab, Bitbucket
| |-- Pull Requests & Code Reviews
| |-- Continuous Integration Basics
|-- React & Ecosystem
| |-- React Fundamentals: JSX, Components, Props
| |-- State & Lifecycle Methods
| |-- Hooks (useState, useEffect, useContext, etc.)
| |-- Component Architecture & Composition
| |-- Routing (React Router)
| |-- State Management (Context API, Redux, Zustand, Recoil)
| |-- React Performance (memo, useCallback, useMemo)
|-- Styling in React
| |-- CSS-in-JS (Styled-Components, Emotion)
| |-- CSS Modules
| |-- Utility-first Frameworks (Tailwind)
| |-- UI Component Libraries (Material-UI, Ant Design)
| |-- Theming & Design Tokens
| |-- Accessibility (a11y) & ARIA
| |-- Cross-Browser Compatibility
|-- Testing in React
| |-- Unit Testing (Jest, React Testing Library)
| |-- Component Testing & Snapshot Testing
| |-- Integration Testing
| |-- End-to-End Testing (Cypress, Playwright)
| |-- Linting & Formatting (ESLint, Prettier)
|-- Performance & Optimization
| |-- Code Splitting & Lazy Loading (React.lazy, Suspense)
| |-- Memoization & Avoiding Re-renders
| |-- Image Optimization & Lazy Loading
| |-- Tree Shaking & Minification
| |-- Critical Rendering Path & Web Vitals
| |-- Server-Side Rendering & Hydration
|-- Build, Deployment & Server-side Tools
| |-- Package Managers: npm, yarn, pnpm
| |-- Build Scripts & Tooling
| |-- Frameworks / SSR: Next.js, Remix
| |-- Static Site Generation (SSG) & Incremental Static Regeneration
| |-- Deployment Platforms: Vercel, Netlify, AWS, DigitalOcean
| |-- CI/CD for React Apps
|-- Projects & Portfolio for React
| |-- Small React Apps & Widgets (e.g. Modal, To-Do List)
| |-- Real-world Projects (Dashboard, E-Commerce, Social App)
| |-- Fullstack Projects (React + backend)
| |-- Open Source Contributions & Collaborations
|-- Continuous Learning & Growth
| |-- Blogs, Tutorials & Courses
| |-- React & JavaScript Conference Talks
| |-- Community & Developer Forums
| |-- Reading Documentation & RFCs
| |-- Tracking the React Ecosystem & Trends
📲 Мы в MAX
✍️ @React_lib | 513 |
