React
описание
Подборки по React js и все что с ним связано. По всем вопросам @evgenycarter
2 682
подписчиков
Охват к подписчикам
17,3%
ERR
Реакции к просмотрам
0,56%
63 на 22 постов
Пересылки к просмотрам
1,09%
123
Постов в день
0,1
всего 22
Где отзываются чаще
доля реакций к просмотрам- 17 авг.Сегодня хочу поговорить про типичную боль 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_lib2,63%
- 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 Москва 241,37%
- 14 июл.⚛️ Я собрал визуализацию того, как работает процесс рендеринга в React Надеюсь, она поможет вам понять этот процесс и позволит лучше предсказывать и контролировать изменения UI. Trigger → Render → Commit 📲 Мы в MAX ✍️ @React_lib1,34%
- 25 июл.🚀 Подборка полезных 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 Питер Новости: Санкт-Петербург / СПБ / ДТП1,16%
- 23 июл.🧠 Сегодня я покажу вам трюк, который ускоряет ре-рендеры в React на реальных проектах Иногда компонент начинает перерендериваться слишком часто, даже когда его пропсы не меняются. Особенно это заметно в списках, формах и сложных UI. Сегодня я расскажу, как я на проектах использую мемоизацию коллбеков и данных, чтобы UI перестал «дергаться». 🔥 Проблема Допустим, есть список элементов, и каждый элемент получает проп onSelect, который создаётся при каждом рендере родителя: const handleSelect = id => { setSelected(id); }; Каждый раз новая функция → дочерние элементы думают, что проп изменился → ненужный ререндер. ✅ Решение Используйте useCallback: const handleSelect = useCallback((id) => { setSelected(id); }, []); Но самое интересное - часто хватает мемоизации не всех, а только “горячих” функций. Я обычно включаю профайлер, смотрю самые частые ререндеры и мемоизирую только узкие места. Так производительность улетает вверх без лишнего усложнения кода. 🎯 Практическое правило, которое я использую Мемоизируйте только то, что реально ререндерится слишком часто. Слепая мемоизация = грязный код. 📲 Мы в MAX ✍️ @React_lib0,97%
- 3 июл.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_lib0,85%
- 27 июл.🎯 Сегодня покажу вам простой, но мощный приём: как ускорить 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_lib0,80%
- 29 июл.Кастомные хуки (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_lib0,72%
- 30 июн.Формы без боли: 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_lib0,60%
- 11 июл.❌ Избегайте использования нескольких переменных состояния для отслеживания статуса. ✅ Вместо этого используйте перечисления (enums). 📲 Мы в MAX ✍️ @React_lib0,58%
- 15 июл.Почему 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_lib0,52%
- 25 июн.Сегодня я хочу рассказать вам о проблеме, которая встречается почти у каждого React-разработчика - "эффект дрожания" интерфейса при условном рендеринге. Допустим, у вас есть компонент, который отображает список данных после загрузки. Пока данные подгружаются, вы показываете спиннер, а потом - сам список. Всё вроде нормально… но при переключении состояния верстка “прыгает”, элементы смещаются, и пользователь видит неприятный скачок. 💡 Как решить? Главная идея — зарезервировать место под контент заранее. Даже если мы показываем скелетон или спиннер, блок должен иметь такую же высоту, как и итоговый контент. Например: {isLoading ? ( <div style={{ height: 300 }}> <Spinner /> </div> ) : ( <List items={data} /> )} А ещё лучше — использовать скелетон-загрузчик (skeleton loader). Он повторяет форму будущего контента, и благодаря этому переключение происходит плавно и без сдвигов. 📌 Совет: в UI-библиотеках вроде Material UI или Ant Design уже есть готовые скелетоны - просто используйте их вместо "чистого" спиннера. Пользователь не заметит перехода, и приложение будет казаться быстрее. А у вас бывает, что верстка дергается при смене состояния? Как вы это решаете? 📲 Мы в MAX ✍️ @React_lib0,40%