Последние посты
React
11 сент., 06:21
🚨 Избегай монолитных компонентов, которые объединяют в себе отображение, управление состоянием и конфигурацию (например, ID, ref'ы) — такие компоненты сложнее сопровождать, тестировать и переиспользовать.✅ Вместо этого разделяй функциональность на составные (composable) компоненты и используй context для передачи конфигурации и состояния.📲 Мы в MAX✍️ @React_libReact
7 сент., 07:40
❌ Избегайте использования нескольких переменных состояния для отслеживания статуса.✅ Вместо этого используйте перечисления (enums).📲 Мы в MAX✍️ @React_libReact
31 авг., 05:49
Сегодня написал пост на тему, которая регулярно бьёт по скорости разработки: почему React-приложение “тормозит”, даже когда кажется, что код нормальный.Часто вижу одну и ту же ситуацию: компонент маленький, логика простая, данных немного, а интерфейс всё равно начинает дёргаться. Особенно в формах, таблицах и списках.Обычно проблема не в React как таковом. Проблема в том, что мы слишком поздно начинаем смотреть что именно ререндерится.Вот 3 вещи, которые я первым делом проверяю:1. Родитель слишком “шумный” Если родительский компонент часто обновляет state, все дочерние компоненты тоже могут улетать в ререндер. Даже если визуально ничего не меняется.2. useMemo и useCallback не спасают автоматически Их часто добавляют “на всякий случай”, но без понимания, где узкое место. В итоге код становится сложнее, а пользы - ноль.3. Ключи в списках Нестабильные key - классика. Если вReact
24 авг., 07:20
❌ Избегайте «прокидывания» пропсов (prop-drilling) для расширения компонентов✅ Вместо этого используйте композицию📲 Мы в MAX✍️ @React_libReact
23 авг., 11:05
🚀 Подборка полезных 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 лайфхакMAXСистемный Администратор | Sysadmin Windows & Linux Server. …Купить рекламу: https://telega.in/m/i_odmin Блог практикующего админа. Настройка Windows Server, Active Directory (AD), GPO и терминальных серверов (RDP). Раб…React
21 авг., 07:50
⚛️ Реактивность - это просто (и всего 35 строк кода)Мы часто воспринимаем реактивность в современных фреймворках (Vue, Solid, MobX или Preact Signals) как некую "магию". Кажется, что под капотом там сложные механизмы, доступные только избранным архитекторам.Автор блога romgrk решил развеять этот миф и показал, что базовый движок реактивности можно реализовать буквально за 35 строчек кода.В статье «Reactivity is easy» он разбирает ключевые концепции: 🔹 Signals (Сигналы) — контейнеры для значений. 🔹 Effects (Эффекты) — функции, которые реагируют на изменения. 🔹 Dependency Tracking — как именно эффект "узнает", на какие сигналы он подписан (спойлер: через глобальный контекст).Отличный материал для тех, кто хочет перестать бояться "магии" стейт-менеджеров и понять, как всё работает на уровне чистого JS.👉 Читать статью: https://romgrk.com/posts/reactivity-is-easy#js #frontendReact
17 авг., 05:16
Сегодня хочу поговорить про типичную боль React-разработчиков - лишние ререндеры.Я регулярно вижу код, где приложение «тормозит», хотя логика простая. В 80% случаев причина банальна: компоненты перерисовываются без необходимости.Что я проверяю в первую очередь1️⃣ props меняются по ссылке<Component data={{ a: 1 }} />Каждый рендер - новый объект → новый ререндер. Решение: useMemo.2️⃣ функции создаются зановоonClick={() => doSomething()}Если компонент обёрнут в memo - он всё равно будет ререндериться. Решение: useCallback.
React
8 авг., 12:00
🚀 Подборка полезных 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 лайфхакMAXСистемный Администратор | Sysadmin Windows & Linux Server. …Купить рекламу: https://telega.in/m/i_odmin Блог практикующего админа. Настройка Windows Server, Active Directory (AD), GPO и терминальных серверов (RDP). Раб…React
5 авг., 12:15
🔥 Антипаттерн в React: избыточные зависимости useEffectВстречали такое?useEffect(() => { fetchData(id); }, [id, fetchData]);❗️Проблема: fetchData — это функция, которая переопределяется при каждом рендере. В итоге эффект срабатывает чаще, чем должен, даже если id не менялся.👎 Это вызывает лишние запросы, лаги и баги в логике.💡 Решения:1. Обёрнуть в useCallback:const fetchData = useCallback((id: string) => { // ... }, []);
React
3 авг., 06:54
🚀 Что такое условный рендеринг в React и зачем он нужен?Если говорить просто, условный рендеринг - это способность вашего React-приложения решать, что именно показывать пользователю в зависимости от определенных условий (состояния, пропсов и т.д.).Думайте об этом как о "if... else...", но для вашего пользовательского интерфейса (UI).- ЕСЛИ пользователь вошел в систему, ТО показать компонент <UserProfile />.- ИНАЧЕ показать компонент <LoginForm />.💡 Для чего он нужен?Без условного рендеринга все наши приложения были бы статичными. Именно эта концепция делает интерфейс динамическим, "живым" и отзывчивым.Он нужен буквально повсюду. Вот самые частые примеры:- Пока идет загрузка данных с сервера: Мы показываем <Spinner /> (крутилку). Как только данные пришли — показываем <DataList />.- Аутентификация: Показываем "Профиль", если isLoggedIn === true, и "Войти", еслиReact
29 июл., 07:14
Кастомные хуки (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,React
27 июл., 06:50
🎯 Сегодня покажу вам простой, но мощный приём: как ускорить React-приложение с помощью мемоизации списковКаждый из нас рендерит списки: товары, заявки, комментарии, юзеров - список бесконечен. И одна из самых частых проблем: каждый элемент списка перерендеривается даже при минимальном изменении родителя.Сегодня разбираем реальный кейс и решение, которое спасает производительность.🔥 ПроблемаУ нас есть список задач, и при обновлении одной задачи - перерендериваются все элементы списка. Визуально это незаметно, но при больших списках производительность падает.Причина проста: у каждого элемента меняется ссылка на props → компонент считается обновлённым → React перерендеривает его.💡 Решение: React.memo + useCallbackВот минимальный рабочий пример.Компонент элемента спискаReact
25 июл., 11:09
🚀 Подборка полезных 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 лайфхакMAXСистемный Администратор | Sysadmin Windows & Linux Server. …Купить рекламу: https://telega.in/m/i_odmin Блог практикующего админа. Настройка Windows Server, Active Directory (AD), GPO и терминальных серверов (RDP). Раб…React
24 июл., 06:01
Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании?На фото ребята из моего комьюнити, где уже больше 220 frontend-разработчиков. Все они успешно устроились в крутые компании и получили офферы от 300 тыс рублей 🫂👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке.В их жизни больше нет бесконечных скучных созвонов, безуспешных откликов на вакансии, странноватых собесов с вопросами словно ты на олимпиаде.И у тебя тоже получится 😎У меня есть канал, где я: 👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения 👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти 👉 На примерах показываю, как проходить собеседования, включая техничку 👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеровИ регу
React
23 июл., 13:15
🧠 Сегодня я покажу вам трюк, который ускоряет ре-рендеры в React на реальных проектахИногда компонент начинает перерендериваться слишком часто, даже когда его пропсы не меняются. Особенно это заметно в списках, формах и сложных UI. Сегодня я расскажу, как я на проектах использую мемоизацию коллбеков и данных, чтобы UI перестал «дергаться».🔥 ПроблемаДопустим, есть список элементов, и каждый элемент получает проп onSelect, который создаётся при каждом рендере родителя:const handleSelect = id => { setSelected(id); };Каждый раз новая функция → дочерние элементы думают, что проп изменился → ненужный ререндер.✅ РешениеИспользуйте useCallback:const handleSelect = useCallback((id) => {React
15 июл., 20:12
Почему useEffect - это не костыль, а инструмент, и как им не надо пользоваться 😅Очень часто вижу в коде:useEffect(() => { fetchData(); }, []);и всё вроде бы ок… пока не появляется зависимость, вроде userId, и кто-то лениво добавляет её в массив зависимостей, не понимая, что произойдёт при каждом изменении.👉 Проблема не в useEffect - а в том, что мы не до конца понимаем его модель. useEffect = реакция на изменение состояния. Если у тебя эффект, который не зависит от UI - например, загрузка данных - вынеси его в кастомный хук или вообще за пределы компонента.Например:function useUser(userId) { const [user, setUser] = useState(null);useEffect(() => {React
14 июл., 05:14
⚛️ Я собрал визуализацию того, как работает процесс рендеринга в ReactНадеюсь, она поможет вам понять этот процесс и позволит лучше предсказывать и контролировать изменения UI.Trigger → Render → Commit📲 Мы в MAX✍️ @React_lib
React
11 июл., 05:42
❌ Избегайте использования нескольких переменных состояния для отслеживания статуса.✅ Вместо этого используйте перечисления (enums).📲 Мы в MAX✍️ @React_libReact
6 июл., 05:34
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;
React
3 июл., 07:37
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
