React
Ir al canal en Telegram
Подборки по React js и все что с ним связано. По всем вопросам @evgenycarter
Mostrar más
Red:2 706
Suscriptores
-524 horas
-147 días
-2230 días
Carga de datos en curso...
Canales Similares
![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.telemetr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=256&q=75)
Nube de Etiquetas
Menciones Entrantes y Salientes
---
---
---
---
---
---
Atraer Suscriptores
julio '26
julio '26
+9
en 0 canales
junio '26
+16
en 0 canales
Get PRO
mayo '26
+28
en 0 canales
Get PRO
abril '26
+17
en 0 canales
Get PRO
marzo '26
+12
en 0 canales
Get PRO
febrero '26
+21
en 0 canales
Get PRO
enero '26
+21
en 0 canales
Get PRO
diciembre '25
+28
en 0 canales
Get PRO
noviembre '25
+45
en 32 canales
Get PRO
octubre '25
+31
en 0 canales
Get PRO
septiembre '25
+56
en 37 canales
Get PRO
agosto '25
+37
en 1 canales
Get PRO
julio '25
+51
en 27 canales
Get PRO
junio '25
+66
en 20 canales
Get PRO
mayo '25
+55
en 44 canales
Get PRO
abril '25
+56
en 37 canales
Get PRO
marzo '25
+86
en 38 canales
Get PRO
febrero '25
+72
en 32 canales
Get PRO
enero '25
+69
en 33 canales
Get PRO
diciembre '24
+71
en 34 canales
Get PRO
noviembre '24
+79
en 33 canales
Get PRO
octubre '24
+80
en 30 canales
Get PRO
septiembre '24
+141
en 29 canales
Get PRO
agosto '24
+67
en 18 canales
Get PRO
julio '24
+51
en 0 canales
Get PRO
junio '24
+82
en 25 canales
Get PRO
mayo '24
+89
en 19 canales
Get PRO
abril '24
+76
en 0 canales
Get PRO
marzo '24
+88
en 21 canales
Get PRO
febrero '24
+73
en 19 canales
Get PRO
enero '24
+147
en 24 canales
Get PRO
diciembre '23
+91
en 24 canales
Get PRO
noviembre '23
+94
en 17 canales
Get PRO
octubre '23
+90
en 18 canales
Get PRO
septiembre '23
+123
en 0 canales
Get PRO
agosto '23
+88
en 0 canales
Get PRO
julio '23
+112
en 0 canales
Get PRO
junio '23
+67
en 0 canales
Get PRO
mayo '23
+92
en 0 canales
Get PRO
abril '23
+81
en 0 canales
Get PRO
marzo '23
+42
en 0 canales
Get PRO
febrero '23
+53
en 0 canales
Get PRO
enero '23
+93
en 0 canales
Get PRO
diciembre '22
+99
en 0 canales
Get PRO
noviembre '22
+68
en 0 canales
Get PRO
octubre '22
+160
en 0 canales
Get PRO
septiembre '22
+232
en 0 canales
Get PRO
agosto '22
+314
en 0 canales
Get PRO
julio '22
+408
en 0 canales
Get PRO
junio '22
+2 238
en 0 canales
| Fecha | Crecimiento de Suscriptores | Menciones | Canales | |
| 14 julio | +1 | |||
| 13 julio | 0 | |||
| 12 julio | 0 | |||
| 11 julio | +1 | |||
| 10 julio | 0 | |||
| 09 julio | +1 | |||
| 08 julio | 0 | |||
| 07 julio | 0 | |||
| 06 julio | +1 | |||
| 05 julio | +2 | |||
| 04 julio | +1 | |||
| 03 julio | 0 | |||
| 02 julio | +2 | |||
| 01 julio | 0 |
Publicaciones del Canal
⚛️ Я собрал визуализацию того, как работает процесс рендеринга в React
Надеюсь, она поможет вам понять этот процесс и позволит лучше предсказывать и контролировать изменения UI.
Trigger → Render → Commit
📲 Мы в MAX
✍️ @React_lib
| 2 |  ❌ Избегайте использования нескольких переменных состояния для отслеживания статуса.
✅ Вместо этого используйте перечисления (enums).
📲 Мы в MAX
✍️ @React_lib | 329 |
| 3 |  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 | 426 |
| 4 | 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 | 400 |
| 5 |  Формы без боли: 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 | 393 |
| 6 | 🚀 Подборка полезных 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 Питер Новости: Санкт-Петербург / СПБ / ДТП | 340 |
| 7 |  Динамический импорт компонентов в 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 | 393 |
| 8 | Всем доброго вечера! Сегодня я хочу рассказать вам о проблеме, которая встречается почти у каждого React-разработчика - "эффект дрожания" интерфейса при условном рендеринге.
Допустим, у вас есть компонент, который отображает список данных после загрузки. Пока данные подгружаются, вы показываете спиннер, а потом - сам список. Всё вроде нормально… но при переключении состояния верстка “прыгает”, элементы смещаются, и пользователь видит неприятный скачок.
💡 Как решить?
Главная идея — зарезервировать место под контент заранее. Даже если мы показываем скелетон или спиннер, блок должен иметь такую же высоту, как и итоговый контент.
Например:
{isLoading ? (
<div style={{ height: 300 }}>
<Spinner />
</div>
) : (
<List items={data} />
)}
А ещё лучше — использовать скелетон-загрузчик (skeleton loader). Он повторяет форму будущего контента, и благодаря этому переключение происходит плавно и без сдвигов.
📌 Совет: в UI-библиотеках вроде Material UI или Ant Design уже есть готовые скелетоны - просто используйте их вместо "чистого" спиннера. Пользователь не заметит перехода, и приложение будет казаться быстрее.
А у вас бывает, что верстка дергается при смене состояния? Как вы это решаете?
📲 Мы в MAX
✍️ @React_lib | 410 |
| 9 |  День сурка frontend-разработчика
Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что.
Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь.
И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы.
Есть классные проекты и сильные команды, где разработчиков действительно ценят, дают расти, поддерживают развитие и платят достойно и ты можешь туда попасть!
👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.
Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂
А в своем канале:
👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться
👉На примерах объясняю, как проходить собеседования, включая техничку
👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров
А еще регулярно публикую полезные материалы:
▪️Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️Чек лист проверки своего резюме
А еще у меня множество успешных кейсов и отзывов, найти их можно в канале.
Реклама, erid: 2W5zFJobajB ИП Галактионов Тихон Витальевич, ИНН 771618975809 | 433 |
| 10 |  Как я ускоряю разработку с помощью React DevTools
Сегодня хочу поделиться инструментом, без которого я уже не представляю работу — React DevTools.
Многие его ставят "для галочки", но реально используют только для просмотра компонентов. А ведь он может сильно ускорить разработку, если выжать из него максимум.
Вот что реально помогает:
1. Профайлер — если у вас страница перерисовывается дольше, чем хотелось бы, откройте вкладку Profiler. Там видно, какие компоненты рендерятся лишний раз и сколько это занимает времени.
2. Поиск по дереву компонентов — если проект большой, можно быстро найти нужный компонент прямо в DevTools (Cmd/Ctrl + F).
3. Редактирование пропсов на лету — в режиме разработчика можно менять пропсы и сразу видеть результат без пересборки проекта.
4. Highlight updates — включает подсветку обновляемых компонентов. Очень удобно, чтобы найти “лишние” рендеры.
Если вы еще не используете хотя бы профайлер и подсветку рендеров — попробуйте. Уже через пару дней вы начнете понимать, где проект "проседает" и что можно оптимизировать.
А вы часто заглядываете в Profiler или больше по старинке — console.log и догадки? 😄
✍️ @React_lib | 430 |
| 11 |  Возможно, вам не нужен useEffect (версия с ref‑колбэками)
В React хук useEffect часто используют для выполнения кода после монтирования компонента: подписки, измерения DOM-элементов, вызовы API и т. д. Но в некоторых случаях — особенно когда нам нужно только получить доступ к DOM-элементу — useEffect оказывается избыточным.
Что предлагают вместо useEffect?
Ref-колбэки.
Вместо того чтобы ждать монтирования и использовать useEffect, можно передать функции-колбэку ссылку (ref). Этот колбэк автоматически вызовется, когда элемент появится или исчезнет в DOM.
Когда использовать?
- Для измерения DOM (размеры, позиция).
- Для инициализации библиотек, которые работают с элементом.
- Для управления фокусом.
Если нужно реагировать на изменения состояния или выполнять сложные сайд-эффекты — тогда useEffect остаётся правильным выбором.
📲 Мы в MAX
✍️ @React_lib | 537 |
| 12 | 🔴 Эфир начнётся уже через 2 часа. Переходи в бот за ссылкой: @shortcut_front_bot | 467 |
| 13 |  Секреты React-разработки. Создай React-портфолио с нуля шаг за шагом
👉 Полный цикл разработки: от первой строки кода до деплоя
👉 Создаём современный и динамичный сайт на React
👉 Полное руководство (4 часа 42 минуты)
Сегодня я собрал в одном видео весь процесс создания портфолио на React с нуля! 🎥 В этом выпуске мы пройдём все этапы: от вёрстки и компонентов до анимации, переключения тем и финального деплоя.
💡 Что вы узнаете в этом видео:
🔹 Разработка структуры портфолио: создаём секции Home, About, Skills, Services, Portfolio, Clients, Contact.
🔹 Работа с React-компонентами: используем useState, useEffect, props и массивы данных.
🔹 Добавление анимации с Motion: оживляем интерфейс и создаём плавные переходы.
🔹 Переключение тем (светлая/тёмная): реализуем через useState и сохраняем в LocalStorage.
🔹 Динамическое меню и кнопка "Вверх": улучшаем навигацию и пользовательский опыт.
🔹 Деплой на Netlify: публикуем проект и делаем его доступным онлайн.
⏱️ Таймкоды:
00:07 — Обзор проекта - что мы будем разрабатывать в React
00:35 — Настройка окружения перед началом работы в React
15:53 — Создаём структуру проекта и компоненты
25:10 — Импортируем и подключаем картинки в проект
31:09 — Создаём компонент Header с меню навигации
57:50 — Разрабатываем секцию Home в React
01:05:05 — Создаём секцию About с данными о разработчике
01:13:30 — Добавляем секцию Skills с анимацией и эффектами
01:31:01 — Переходим к блоку Work Experience: оформление и логика
01:36:02 — Создаём секцию Services: карточки услуг и стили
02:02:49 — Разрабатываем секцию Portfolio с проектами
02:19:29 — Добавляем блок Next Project для перелистывания работ
02:24:35 — Создаём секцию Our Clients с отзывами и логотипами
02:44:38 — Разрабатываем секцию Contact с формой обратной связи
02:58:10 — Исправляем баг: убираем скролл при открытии мобильного меню
03:01:57 — Добавляем плавное появление popup в секции Portfolio
03:04:10 — Создаём секцию Footer с контактами и ссылками
03:22:00 — Добавляем кнопку "Вверх" для удобной навигации
03:28:33 — Реализуем переключение тем (светлая/тёмная) с сохранением
03:38:51 — Анимация элементов с помощью библиотеки React Motion
03:43:56 — Разбираем работу Motion: ключевые атрибуты и настройки
03:45:22 — Выносим анимацию в отдельный файл для удобства
04:19:07 — Обзор будущих проектов, которые можно реализовать
04:37:53 — Финальный деплой проекта на Netlify
04:42:23 — Всем мира и добра! 🚀😊
источник
📲 Мы в MAX
✍️ @React_lib | 542 |
| 14 |  🔍Тестовое собеседование с руководителем Frontend-разработки в этот четверг
18 июня(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.
Как это будет:
📂 Виталий Черков, руководитель группы Frontend разработки с опытом 8+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Виталий будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Виталию
Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.
Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot
Реклама.
О рекламодателе. | 470 |
| 15 |  Правило ESLint для обнаружения избыточного состояния в React
📲 Мы в MAX
✍️ @React_lib | 455 |
| 16 | 🧠 Зачем нужен React Query и как он меняет подход к загрузке данных
Привет! Сегодня я хочу рассказать вам о библиотеке, которая стала для меня must-have в любом проекте на React — React Query.
Если вы всё ещё пишете useEffect + fetch + useState, чтобы загрузить данные, ловите инсайт: это можно делать проще и мощнее.
Вот чем React Query реально помогает:
✅ Автоматический кеш: данные не перезагружаются каждый раз при переходе между страницами.
✅ Повторные запросы при восстановлении соединения или фокусе окна.
✅ Мутации (POST, PUT и т.д.) с оптимистичным обновлением UI.
✅ Умное управление состояниями: isLoading, isError, data, refetch — всё под рукой.
✅ Простая интеграция с TypeScript.
Пример использования:
const { data, isLoading, error } = useQuery({
queryKey: ['users'],
queryFn: () => fetch('/api/users').then(res => res.json())
});
🔥 Всё, никакого useEffect! А самое крутое — когда ты добавляешь бесконечный скролл или пагинацию — React Query делает это почти без боли.
Если ещё не пробовал — обязательно покрути. Это прям реальный буст продуктивности.
📲 Мы в MAX
✍️ @React_lib | 530 |
| 17 | 🔥9 полезных функций и хуков, которые пригодятся продвинутому React-разработчику для управления состоянием, оптимизацией и архитектурой компонентов
1. useDebounce
Позволяет "отложить" значение — полезно для ввода/поиска.
import { useEffect, useState } from 'react';
export function useDebounce<T>(value: T, delay = 300): T {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const timer = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debounced;
}
2. usePrevious
Возвращает предыдущее значение пропа или стейта.
import { useRef, useEffect } from 'react';
export function usePrevious<T>(value: T): T | undefined {
const ref = useRef<T>();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
3. useOnClickOutside
Закрытие модалок, дропдаунов при клике вне.
import { useEffect } from 'react';
export function useOnClickOutside(ref: React.RefObject<HTMLElement>, handler: () => void) {
useEffect(() => {
const listener = (e: MouseEvent) => {
if (!ref.current || ref.current.contains(e.target as Node)) return;
handler();
};
document.addEventListener('mousedown', listener);
return () => document.removeEventListener('mousedown', listener);
}, [ref, handler]);
}
4. useIsMounted
Помогает избежать обновления состояния после размонтирования.
import { useEffect, useRef } from 'react';
export function useIsMounted() {
const ref = useRef(false);
useEffect(() => {
ref.current = true;
return () => { ref.current = false; };
}, []);
return ref;
}
5. useEventCallback
Запоминает последнюю версию колбэка без повторного рендера.
import { useRef, useCallback } from 'react';
export function useEventCallback<T extends (...args: any[]) => any>(fn: T): T {
const ref = useRef(fn);
ref.current = fn;
return useCallback((...args: any[]) => ref.current(...args), []) as T;
}
6. useAsync
Асинхронный вызов с контролем загрузки, ошибок и результата.
import { useState, useCallback } from 'react';
export function useAsync<T>(asyncFn: () => Promise<T>) {
const [loading, setLoading] = useState(false);
const [data, setData] = useState<T | null>(null);
const [error, setError] = useState<unknown>(null);
const run = useCallback(async () => {
setLoading(true);
setError(null);
try {
const result = await asyncFn();
setData(result);
} catch (e) {
setError(e);
} finally {
setLoading(false);
}
}, [asyncFn]);
return { loading, data, error, run };
}
7. useLocalStorage
Простой хук для хранения данных в localStorage.
import { useState, useEffect } from 'react';
export function useLocalStorage<T>(key: string, initial: T) {
const [value, setValue] = useState<T>(() => {
const json = localStorage.getItem(key);
return json ? JSON.parse(json) : initial;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue] as const;
}
8. useMediaQuery
Работа с медиа-запросами в React без CSS.
import { useEffect, useState } from 'react';
export function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(() => window.matchMedia(query).matches);
useEffect(() => {
const media = window.matchMedia(query);
const listener = () => setMatches(media.matches);
media.addEventListener('change', listener);
return () => media.removeEventListener('change', listener);
}, [query]);
return matches;
}
9. useToggle
Бинарный переключатель состояния (on/off).
import { useCallback, useState } from 'react';
export function useToggle(initial = false) {
const [state, setState] = useState(initial);
const toggle = useCallback(() => setState(prev => !prev), []);
return [state, toggle] as const;
}
📲 Мы в MAX
✍️ @React_lib | 572 |
| 18 |  🚀 Как ускорить загрузку React-приложения? 5 реальных советов
Сегодня покажу, как я оптимизирую загрузку фронтенда в продакшене. Это помогает не только SEO, но и удерживает пользователя, который мог бы уйти, не дождавшись загрузки.
Вот 5 проверенных приёмов:
1. Code Splitting (разделение кода)
Используйте React.lazy и Suspense, чтобы грузить компоненты только при необходимости. Особенно полезно для роутинга.
2. Tree shaking
Убедитесь, что сборщик (Webpack, Vite) удаляет неиспользуемый код. Проверь, чтобы библиотеки импортировались модульно (import { Button } from 'lib', а не всё подряд).
3. Оптимизация картинок
Используйте современные форматы (WebP, AVIF) и lazy загрузку изображений, чтобы не тянуть весь хлам сразу.
4. Минификация и сжатие
Включите GZIP или Brotli на сервере. Также обязательно минифицируйте JS/CSS.
5. Critical CSS и SSR/SSG
Подумайте об использовании Next.js или аналогов. Они помогают загрузить только нужный CSS и HTML прямо на старте, особенно полезно для первых 3 секунд.
❓А какие техники используете вы, чтобы ускорить загрузку?
📲 Мы в MAX
✍️ @React_lib | 597 |
| 19 | 🔧 Шпаргалка по базовым компонентам 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;
📲 Мы в MAX
✍️ @React_lib | 539 |
| 20 | 🚀 Подборка полезных 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 лайфхак
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 Питер Новости: Санкт-Петербург / СПБ / ДТП | 139 |
