React

🚀 Подборка полезных 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

🔥 Антипаттерн в 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

🚀 Что такое условный рендеринг в 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

Кастомные хуки (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

🎯 Сегодня покажу вам простой, но мощный приём: как ускорить 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

🚀 Подборка полезных 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 Питер Новости: Санкт-Петербург / СПБ / ДТП

Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании? На фото ребята из моего комьюнити, где уже больше 220 frontend-разработчиков. Все они успешно устроились в крутые компании и получили офферы от 300 тыс рублей 🫂 👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке. В их жизни больше нет бесконечных скучных созвонов, безуспешных откликов на вакансии, странноватых собесов с вопросами словно ты на олимпиаде. И у тебя тоже получится 😎 У меня есть канал, где я: 👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения 👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти 👉 На примерах показываю, как проходить собеседования, включая техничку 👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров И регулярно выкладываю полезное: ▪️ Задачи, на которых валятся кандидаты ▪️ Подборка из 100+ каналов с вакансиями для разработчиков ▪️ 100 вопросов, которые помогут тебе на собеседовании ▪️ Чек-лист для проверки своего резюме Подписывайся: https://t.me/+yKkCEerQCzRmZjY6 Реклама, erid: 2W5zFHYzE6u ИП Галактионов Тихон Витальевич, ИНН 771618975809

🧠 Сегодня я покажу вам трюк, который ускоряет ре-рендеры в React на реальных проектах Иногда компонент начинает перерендериваться слишком часто, даже когда его пропсы не меняются. Особенно это заметно в списках, формах и сложных UI. Сегодня я расскажу, как я на проектах использую мемоизацию коллбеков и данных, чтобы UI перестал «дергаться». 🔥 Проблема Допустим, есть список элементов, и каждый элемент получает проп onSelect, который создаётся при каждом рендере родителя: const handleSelect = id => { setSelected(id); }; Каждый раз новая функция → дочерние элементы думают, что проп изменился → ненужный ререндер. ✅ Решение Используйте useCallback: const handleSelect = useCallback((id) => { setSelected(id); }, []); Но самое интересное - часто хватает мемоизации не всех, а только “горячих” функций. Я обычно включаю профайлер, смотрю самые частые ререндеры и мемоизирую только узкие места. Так производительность улетает вверх без лишнего усложнения кода. 🎯 Практическое правило, которое я использую Мемоизируйте только то, что реально ререндерится слишком часто. Слепая мемоизация = грязный код. 📲 Мы в MAX ✍️ @React_lib

Почему 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

⚛️ Я собрал визуализацию того, как работает процесс рендеринга в React Надеюсь, она поможет вам понять этот процесс и позволит лучше предсказывать и контролировать изменения UI. Trigger → Render → Commit 📲 Мы в MAX ✍️ @React_lib

❌ Избегайте использования нескольких переменных состояния для отслеживания статуса. ✅ Вместо этого используйте перечисления (enums). 📲 Мы в MAX ✍️ @React_lib

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

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

Формы без боли: 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

🚀 Подборка полезных 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 Питер Новости: Санкт-Петербург / СПБ / ДТП

Динамический импорт компонентов в 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

Сегодня я хочу рассказать вам о проблеме, которая встречается почти у каждого React-разработчика - "эффект дрожания" интерфейса при условном рендеринге. Допустим, у вас есть компонент, который отображает список данных после загрузки. Пока данные подгружаются, вы показываете спиннер, а потом - сам список. Всё вроде нормально… но при переключении состояния верстка “прыгает”, элементы смещаются, и пользователь видит неприятный скачок. 💡 Как решить? Главная идея — зарезервировать место под контент заранее. Даже если мы показываем скелетон или спиннер, блок должен иметь такую же высоту, как и итоговый контент. Например: {isLoading ? ( <div style={{ height: 300 }}> <Spinner /> </div> ) : ( <List items={data} /> )} А ещё лучше — использовать скелетон-загрузчик (skeleton loader). Он повторяет форму будущего контента, и благодаря этому переключение происходит плавно и без сдвигов. 📌 Совет: в UI-библиотеках вроде Material UI или Ant Design уже есть готовые скелетоны - просто используйте их вместо "чистого" спиннера. Пользователь не заметит перехода, и приложение будет казаться быстрее. А у вас бывает, что верстка дергается при смене состояния? Как вы это решаете? 📲 Мы в MAX ✍️ @React_lib

День сурка frontend-разработчика Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что. Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь. И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы. Есть классные проекты и сильные команды, где разработчиков действительно ценят, дают расти, поддерживают развитие и платят достойно и ты можешь туда попасть! 👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке. Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂 А в своем канале: 👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения 👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться 👉На примерах объясняю, как проходить собеседования, включая техничку 👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров А еще регулярно публикую полезные материалы: ▪️Задачи, на которых валяться кандидаты ▪️База по микрофронтам ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️100 вопросов, которые точно помогут тебе на собеседовании ▪️Чек лист проверки своего резюме А еще у меня множество успешных кейсов и отзывов, найти их можно в канале. Реклама, erid: 2W5zFJobajB ИП Галактионов Тихон Витальевич, ИНН 771618975809

Как я ускоряю разработку с помощью React DevTools Сегодня хочу поделиться инструментом, без которого я уже не представляю работу — React DevTools. Многие его ставят "для галочки", но реально используют только для просмотра компонентов. А ведь он может сильно ускорить разработку, если выжать из него максимум. Вот что реально помогает: 1. Профайлер — если у вас страница перерисовывается дольше, чем хотелось бы, откройте вкладку Profiler. Там видно, какие компоненты рендерятся лишний раз и сколько это занимает времени. 2. Поиск по дереву компонентов — если проект большой, можно быстро найти нужный компонент прямо в DevTools (Cmd/Ctrl + F). 3. Редактирование пропсов на лету — в режиме разработчика можно менять пропсы и сразу видеть результат без пересборки проекта. 4. Highlight updates — включает подсветку обновляемых компонентов. Очень удобно, чтобы найти “лишние” рендеры. Если вы еще не используете хотя бы профайлер и подсветку рендеров — попробуйте. Уже через пару дней вы начнете понимать, где проект "проседает" и что можно оптимизировать. А вы часто заглядываете в Profiler или больше по старинке — console.log и догадки? 📲 Мы в MAX ✍️ @React_lib

Возможно, вам не нужен useEffect (версия с ref‑колбэками) В React хук useEffect часто используют для выполнения кода после монтирования компонента: подписки, измерения DOM-элементов, вызовы API и т. д. Но в некоторых случаях — особенно когда нам нужно только получить доступ к DOM-элементу — useEffect оказывается избыточным. Что предлагают вместо useEffect? Ref-колбэки. Вместо того чтобы ждать монтирования и использовать useEffect, можно передать функции-колбэку ссылку (ref). Этот колбэк автоматически вызовется, когда элемент появится или исчезнет в DOM. Когда использовать? - Для измерения DOM (размеры, позиция). - Для инициализации библиотек, которые работают с элементом. - Для управления фокусом. Если нужно реагировать на изменения состояния или выполнять сложные сайд-эффекты — тогда useEffect остаётся правильным выбором. 📲 Мы в MAX ✍️ @React_lib