React
رفتن به کانال در Telegram
Подборки по React js и все что с ним связано. По всем вопросам @evgenycarter
نمایش بیشتر
شبکه:2 681
مشترکین
اطلاعاتی وجود ندارد24 ساعت
-27 روز
-1530 روز
در حال بارگیری داده...
کانالهای مشابه
![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
+14
در 0 کانالها
ژوئیه '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 کانالها
| تاریخ | رشد مشترکین | اشارات | کانالها | |
| 26 اوت | +2 | |||
| 25 اوت | +1 | |||
| 24 اوت | 0 | |||
| 23 اوت | +1 | |||
| 22 اوت | 0 | |||
| 21 اوت | 0 | |||
| 20 اوت | 0 | |||
| 19 اوت | +1 | |||
| 18 اوت | +1 | |||
| 17 اوت | +1 | |||
| 16 اوت | +2 | |||
| 15 اوت | 0 | |||
| 14 اوت | +2 | |||
| 13 اوت | 0 | |||
| 12 اوت | 0 | |||
| 11 اوت | 0 | |||
| 10 اوت | 0 | |||
| 09 اوت | 0 | |||
| 08 اوت | +1 | |||
| 07 اوت | 0 | |||
| 06 اوت | 0 | |||
| 05 اوت | 0 | |||
| 04 اوت | 0 | |||
| 03 اوت | +1 | |||
| 02 اوت | 0 | |||
| 01 اوت | +1 |
پستهای کانال
❌ Избегайте «прокидывания» пропсов (prop-drilling) для расширения компонентов
✅ Вместо этого используйте композицию
📲 Мы в MAX
✍️ @React_lib
| 2 | 🚀 Подборка полезных 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 | 233 |
| 3 | ⚛️ Реактивность - это просто (и всего 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 | 304 |
| 4 |  Сегодня хочу поговорить про типичную боль 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 | 401 |
| 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 | 433 |
| 6 | ![🔥 Антипаттерн в 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 | 420 |
| 7 | 🚀 Что такое условный рендеринг в 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 | 395 |
| 8 | Кастомные хуки (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 |
| 9 | 🎯 Сегодня покажу вам простой, но мощный приём: как ускорить 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 |
| 10 | 🚀 Подборка полезных 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 |
| 11 |  Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании?
На фото ребята из моего комьюнити, где уже больше 220 frontend-разработчиков. Все они успешно устроились в крутые компании и получили офферы от 300 тыс рублей 🫂
👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке.
В их жизни больше нет бесконечных скучных созвонов, безуспешных откликов на вакансии, странноватых собесов с вопросами словно ты на олимпиаде.
И у тебя тоже получится 😎
У меня есть канал, где я:
👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения
👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти
👉 На примерах показываю, как проходить собеседования, включая техничку
👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров
И регулярно выкладываю полезное:
▪️ Задачи, на которых валятся кандидаты
▪️ Подборка из 100+ каналов с вакансиями для разработчиков
▪️ 100 вопросов, которые помогут тебе на собеседовании
▪️ Чек-лист для проверки своего резюме
Подписывайся: https://t.me/+yKkCEerQCzRmZjY6
Реклама, erid: 2W5zFHYzE6u ИП Галактионов Тихон Витальевич, ИНН 771618975809 | 401 |
| 12 | 🧠 Сегодня я покажу вам трюк, который ускоряет ре-рендеры в React на реальных проектах
Иногда компонент начинает перерендериваться слишком часто, даже когда его пропсы не меняются. Особенно это заметно в списках, формах и сложных UI.
Сегодня я расскажу, как я на проектах использую мемоизацию коллбеков и данных, чтобы UI перестал «дергаться».
🔥 Проблема
Допустим, есть список элементов, и каждый элемент получает проп onSelect, который создаётся при каждом рендере родителя:
const handleSelect = id => {
setSelected(id);
};
Каждый раз новая функция → дочерние элементы думают, что проп изменился → ненужный ререндер.
✅ Решение
Используйте useCallback:
const handleSelect = useCallback((id) => {
setSelected(id);
}, []);
Но самое интересное - часто хватает мемоизации не всех, а только “горячих” функций.
Я обычно включаю профайлер, смотрю самые частые ререндеры и мемоизирую только узкие места. Так производительность улетает вверх без лишнего усложнения кода.
🎯 Практическое правило, которое я использую
Мемоизируйте только то, что реально ререндерится слишком часто.
Слепая мемоизация = грязный код.
📲 Мы в MAX
✍️ @React_lib | 422 |
| 13 | Почему 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 |
| 14 |  ⚛️ Я собрал визуализацию того, как работает процесс рендеринга в React
Надеюсь, она поможет вам понять этот процесс и позволит лучше предсказывать и контролировать изменения UI.
Trigger → Render → Commit
📲 Мы в MAX
✍️ @React_lib | 514 |
| 15 |  ❌ Избегайте использования нескольких переменных состояния для отслеживания статуса.
✅ Вместо этого используйте перечисления (enums).
📲 Мы в MAX
✍️ @React_lib | 682 |
| 16 |  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 |
| 17 | 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 |
| 18 |  Формы без боли: react-hook-form + zod = схема в центре, минимум ререндеров
Сейчас покажу, как я собираю формы так, чтобы валидация была в одном месте, а компоненты не прыгали от каждого ввода.
1) Схема — источник правды
import { z } from 'zod';
export const userSchema = z.object({
email: z.string().email(),
age: z.number().int().min(18),
newsletter: z.boolean().default(false),
});
export type UserForm = z.infer<typeof userSchema>;
2) Инициализация формы с резолвером
import { useForm, FormProvider } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
const UserForm = ({ initial }: { initial?: Partial<UserForm> }) => {
const methods = useForm<UserForm>({
resolver: zodResolver(userSchema),
defaultValues: { newsletter: false, ...initial },
mode: 'onChange', // мгновенная подсветка ошибок
});
const { handleSubmit, formState: { isSubmitting, errors } } = methods;
const onSubmit = async (data: UserForm) => {
// маппим серверные ошибки обратно в форму при необходимости
// setError('email', { type: 'server', message: 'уже занято' })
await api.saveUser(data);
};
return (
<FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)}>
<Input name="email" label="Email" />
<NumberInput name="age" label="Возраст" />
<Checkbox name="newsletter" label="Подписаться" />
{errors.root && <p className="error">{errors.root.message}</p>}
<button disabled={isSubmitting}>Сохранить</button>
</form>
</FormProvider>
);
};
3) Поля - через контекст, с мемоизацией
import { useFormContext, Controller } from 'react-hook-form';
// Простой контролируемый инпут с минимальными ререндерами
export const Input = React.memo(({ name, label }: { name: string; label: string }) => {
const { register, formState: { errors } } = useFormContext();
return (
<label>
{label}
<input {...register(name)} />
{errors[name] && <span className="error">{String(errors[name]?.message)}</span>}
</label>
);
});
// Пример для нестандартного компонента через Controller
export const NumberInput = React.memo(({ name, label }: { name: string; label: string }) => {
const { control, formState: { errors } } = useFormContext();
return (
<label>
{label}
<Controller
control={control}
name={name}
render={({ field }) => <input type="number" {...field} />}
/>
{errors[name] && <span className="error">{String(errors[name]?.message)}</span>}
</label>
);
});
4) Динамические списки - useFieldArray
const { control } = useFormContext();
const { fields, append, remove } = useFieldArray({ control, name: 'phones' });
Храните массивы в форме, рендерите по fields, добавляйте/удаляйте кнопками - ререндерится только нужный участок.
5) Практические советы
- Включайте DevTools формы только в dev.
- Ошибки сервера маппьте через setError, а не кидайте alert.
- При редактировании сущности меняйте key формы (<form key={user.id}>) — проще, чем делать reset в куче мест.
- Дорогие поля оборачивайте в React.memo, а вычисления — в useMemo.
📲 Мы в MAX
✍️ @React_lib | 444 |
| 19 | 🚀 Подборка полезных 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 Типичный Сисадмин
Excel лайфхак 📌
https://t.me/Excel_lifehack Excel лайфхак
Английский с нуля 🇬🇧
https://max.ru/UchuEnglish
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 Свежие новости Москвы
https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП | 391 |
| 20 |  Динамический импорт компонентов в React.
Часто в приложении мы грузим сразу всё, даже то, что пользователю может и не понадобиться. Например, модальные окна, сложные графики, админские панели. Это увеличивает бандл и замедляет загрузку.
Решение простое - использовать React.lazy и Suspense:
import { Suspense, lazy } from "react";
const Chart = lazy(() => import("./Chart"));
function Dashboard() {
return (
<div>
<h1>Статистика</h1>
<Suspense fallback={<p>Загрузка графика...</p>}>
<Chart />
</Suspense>
</div>
);
}
Теперь график подгрузится только тогда, когда реально нужен.
⚡ Это экономит мегабайты и ускоряет first paint приложения.
👉 Но будь аккуратен: динамический импорт хорошо работает для редко используемых частей. А если компонент нужен почти всегда - выгоды не будет.
Я, например, почти всегда лениво загружаю модальные окна и тяжелые виджеты.
А ты используешь React.lazy у себя в проекте?
📲 Мы в MAX
✍️ @React_lib | 435 |
