Пока нет отзывов. Будьте первым, кто поделится своим опытом!
Последние посты
React
17 мая 2026 г., 14: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 Типичный Сисадмин
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 Свежие новости Москвы
473
2
0
React
17 мая 2026 г., 14:20
Сегодня я покажу вам одну фишку, которую часто недооценивают — как упростить управление глобальным состоянием с помощью Context + useReducer.
🧠 Многие сразу тянут в проект Redux или Zustand, но это не всегда нужно. Если у вас приложение небольшое или средней сложности — useReducer + Context может закрыть все ваши нужды.
Вот пример мини-хранилища:
// counterContext.tsx
import { createContext, useReducer, useContext, ReactNode } from 'react';
const CounterContext = createContext(null);
const initialState = { count: 0 };
function reducer(state: typeof initialState, action: { type: string }) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
}
export const CounterProvider = ({ children }: { children: ReactNode }) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
{children}
);
};
export const useCounter = () => useContext(CounterContext);
А вот как использовать:
// App.tsx
import { CounterProvider, useCounter } from './counterContext';
function Counter() {
const { state, dispatch } = useCounter();
return (
Count: {state.count}
);
}
export default function App() {
return (
);
}
🎯 Такой подход помогает:
- Локализовать логику
- Избежать лишних зависимостей
- Делать масштабирование более контролируемым
Если в будущем нужно будет вынести логику в отдельные модули или добавить middlewares — это тоже можно сделать!
А вы как решаете глобальное состояние в небольших проектах? Используете кастомные хуки, Zustand или всё же Redux?
📲 https://max.ru/react_lib
✍️
React
17 мая 2026 г., 14:20
Сегодня я покажу вам фичу React, которую многие недооценивают — useCallback. Часто его либо используют слишком много, либо вообще не используют. А ведь он может здорово помочь оптимизировать ререндеры, особенно когда дело касается передачи функций в дочерние компоненты.
Что делает useCallback?
Он кэширует функцию, возвращая ту же ссылку, пока зависимости не изменятся.
const handleClick = useCallback(() => {
console.log('Clicked!');
}, []);
Без него, при каждом ререндере компонента создаётся новая функция, и если вы передаёте её в props, это может триггерить лишние ререндеры у дочерних компонентов.
Где реально нужен useCallback?
- Когда функция передаётся в мемоизированный компонент (React.memo)
- Когда функция используется в useEffect, useMemo или других хук-эффектах
- Когда вы работаете с большими списками, и каждый элемент зависит от onClick или другого хендлера
Где не нужен?
- В простых компонентах без глубоких вложенностей
- Когда вы не передаёте функцию в другие компоненты
- Когда оптимизация важна меньше, чем читаемость
Мини-пример
const Parent = () => {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(c => c + 1);
}, []);
return ;
};
const Child = React.memo(({ onClick }: { onClick: () => void }) => {
console.log('Child rendered');
return ;
});
Если бы мы не использовали useCallback, Child бы перерендеривался каждый раз, даже если count не менялся внутри него.
Пишите в комментах, как часто вы используете useCallback — помогает или только мешает?
📲 https://max.ru/react_lib
✍️
515
React
17 мая 2026 г., 14:20
Сегодня покажу вам, как в React удобно работать с формами на базе react-hook-form. Это мой go-to инструмент для любых форм в проектах.
Почему именно react-hook-form?
- ⚡ Быстрее, чем Formik (нет лишних ререндеров)
- 🔍 Простая валидация через yup или zod
- 🔌 Легко интегрируется с UI-библиотеками (MUI, Ant Design, Tailwind)
Минималистичный пример:
import { useForm } from "react-hook-form";
export default function MyForm() {
const { register, handleSubmit } = useForm();
const onSubmit = data => console.log(data);
return (
);
}
Интеграция с Yup:
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
const schema = yup.object({
email: yup.string().email().required(),
}).required();
export default function ValidatedForm() {
const { register, handleSubmit, formState: { errors } } = useForm({
resolver: yupResolver(schema),
});
return (
);
}
🔥 Очень советую попробовать на новом проекте. Работать с формами становится не только проще, но и приятно.
📲 https://max.ru/react_lib
✍️
660
React
17 мая 2026 г., 14:20
Как сделать loader с задержкой, чтобы не мигал?
Иногда при загрузке данных хочется показать спиннер, но только если это занимает больше, скажем, 300мс. Это позволяет избежать "мигающего" лоадера при быстрой загрузке. Я часто использую этот приём, особенно при загрузке модалок или переключении вкладок.
Вот простая реализация на React:
import { useState, useEffect } from "react";
function useDelayedLoader(isLoading: boolean, delay = 300) {
const [showLoader, setShowLoader] = useState(false);
useEffect(() => {
let timeout: ReturnType;
if (isLoading) {
timeout = setTimeout(() => setShowLoader(true), delay);
} else {
setShowLoader(false);
}
return () => clearTimeout(timeout);
}, [isLoading, delay]);
return showLoader;
}
Использование:
const isLoading = ...; // например, из useQuery или useState
const showLoader = useDelayedLoader(isLoading);
return (
<>
{showLoader && }
{!isLoading && }
);
⚡️ Профит — спиннер появляется только если загрузка реально долгая. Пользователь не чувствует "дёргания" интерфейса. Маленький UX-трюк, но эффект — огромный.
📲 https://max.ru/react_lib
✍️
597
2
React
17 мая 2026 г., 14:20
📷 Photo
Как frontend-разработчику получить оффер в Big Tech?
Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные.
Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK...
Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾
Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор.
Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.
В своем канале:
https://t.me/frontend_punksРазбираюсамые популярные и каверзные вопросы на собесах
👉Рассказываю как пройти фильтр HR
👉Борюсь с убеждениями, которые мешают развиваться
👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров
Регулярно публикую полезные материалы:
▪️100 вопросов, которые точно помогут тебе на собеседовании ▪️Подборка из 100+ каналов с вакансиями для разработчиков https://t.me/frontend_punks10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1
https://t.me/frontend_punksЧек лист проверки своего резюме
Подписывайся, нас уже 4500 🤓: ссылка
Реклама, erid: 2W5zFG9M9gD ИП Галактионов Тихон Витальевич, ИНН 771618975809
React
17 мая 2026 г., 14:20
🎥 Video
🚨 Избегай монолитных компонентов, которые объединяют в себе отображение, управление состоянием и конфигурацию (например, ID, ref'ы) — такие компоненты сложнее сопровождать, тестировать и переиспользовать.
✅ Вместо этого разделяй функциональность на составные (composable) компоненты и используй context для передачи конфигурации и состояния.
📲 https://max.ru/react_lib
✍️
585
4
React
17 мая 2026 г., 14: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 и др.
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 Свежие новости Москвы
React
17 мая 2026 г., 14:20
🛠️ Оптимизация ререндеринга в React: 3 ключевых совета
Ререндеринг — один из главных "скрытых" врагов производительности в React. Если компонент ререндерится слишком часто, это может привести к лагам и снижению FPS в UI. Сегодня разберём три способа, как минимизировать ненужные ререндеры.
1️⃣ Используйте React.memo
Если ваш компонент получает одинаковые пропсы и не должен ререндериться без изменений, оберните его в React.memo.
🔹 Пример:
const MyComponent = React.memo(({ count }: { count: number }) => {
console.log('Ререндер!');
return
Count: {count}
;
});
👉 Теперь компонент будет ререндериться только если count изменился.
2️⃣ Используйте useCallback для функций
Передача новой функции в пропсы приводит к ререндерингу. useCallback предотвращает это:
🔹 Пример:
const handleClick = useCallback(() => {
console.log('Clicked!');
}, []);
👉 Теперь handleClick не будет пересоздаваться при каждом ререндере.
3️⃣ Используйте useMemo для вычислений
Если у вас есть тяжёлые вычисления, мемоизируйте их с useMemo:
🔹 Пример:
const expensiveValue = useMemo(() => {
return calculateHeavyStuff(data);
}, [data]);
👉 Теперь calculateHeavyStuff будет выполняться только при изменении data, а не при каждом ререндере.
📲 https://max.ru/react_lib
✍️
555
5
React
17 мая 2026 г., 14:20
Сейчас покажу вам приём, который сильно упрощает React-код: не храните в state то, что можно вычислить.
Очень часто вижу такое:
const [fullName, setFullName] = useState('')
useEffect(() => {
setFullName(`${user.firstName} ${user.lastName}`)
}, [user])
На первый взгляд всё нормально. Но по факту это лишний state, лишний useEffect и лишний ререндер.
Гораздо проще так:
const fullName = `${user.firstName} ${user.lastName}`
Или если вычисление тяжёлое:
const filteredItems = useMemo(() => {
return items.filter(item => item.active)
}, [items])
Что это даёт:
• меньше кода
• меньше багов из-за рассинхрона
• проще поддержка
• компонент легче читать
Я обычно задаю себе один вопрос:
это данные, которые реально меняются отдельно, или это просто производное значение?
Если производное почти всегда не нужен useState.
Вот где особенно часто ошибаются:
• fullName из firstName и lastName
• isFormValid из значений формы
• sortedList из массива и сортировки
• visibleItems из фильтра и исходных данных
Чем меньше лишнего state в компоненте, тем спокойнее вам потом его дебажить.
📲 https://max.ru/react_lib
✍️
Почему React-приложение “лагает” при вводе в инпут - и как починить за 3 минуты
Сегодня покажу классическую ситуацию: у тебя есть форма/поиск, ты печатаешь и интерфейс начинает подтормаживать. Чаще всего причина одна: на каждый onChange ты триггеришь тяжёлый ререндер (фильтрация, сортировка, построение списков, пересчёт графиков, сложные компоненты).
Быстрая диагностика
1. Открой React DevTools → Profiler
2. Запиши ввод в поле
3. Посмотри, кто ререндерится и сколько времени занимает
Три быстрых фикса (по популярности)
1) useDeferredValue для “тяжёлого” поиска
• Инпут обновляется мгновенно
• Тяжёлая часть догоняет “в фоне”
Идея: рендер списка завязываем не на query, а на deferredQuery.
2) useMemo для вычислений
Если делаешь filter/sort/map по большому массиву - мемоизируй результат по зависимостям.
3) Разделяй состояние
Частая ошибка: держать “всё” в одном компоненте.
Инпут сверху - список снизу. Если список тяжёлый, вынеси его в отдельный компонент + memo.
Мини-чеклист
• Есть ли тяжёлые вычисления в рендере?
• Ререндерится ли список при каждом вводе?
• Можно ли “отложить” вычисление (deferred)?
• Можно ли кешировать (memo)?
• Можно ли изолировать компонент?
✍️
841
3
React
28 мар. 2026 г., 02:16
useMemo и useCallback - когда они реально помогают, а когда вредят
Сегодня разберём больную тему: “обмазался мемоизацией - стало хуже”.
Когда useMemo/useCallback НЕ нужны
🔹Значение/функция не передаются в memo - компоненты и не используются как deps.
🔹Вычисление дешёвое (например, arr.map на 20 элементов).
🔹Ты добавил их “на всякий случай”.
Побочный эффект: ты усложняешь код и добавляешь лишнюю работу React (хранить кеш, сравнивать deps).
Когда они реально спасают
1. Стабильные пропсы для React.memo
const onSelect = React.useCallback((id) => {
setSelected(id);
}, []);
2. Тяжёлые вычисления
const filtered = React.useMemo(() => heavyFilter(items, query), [items, query]);
3. Объекты в deps (чтобы не триггерить эффекты/хуки)
const params = React.useMemo(() => ({ q: query, page }), [query, page]);
Быстрый чек-лист перед добавлением мемоизации
🔹Это реально горячая точка? (профайлер/замеры)
🔹Без мемоизации есть лишние рендеры дочерних memo?
🔹Или это просто “красивее выглядит”?
✍️
1,300
3
React
28 мар. 2026 г., 02:16
🎥 Video
❌ Избегайте «прокидывания» пропсов (prop-drilling) для расширения компонентов
✅ Вместо этого используйте композицию
✍️
Как перестать страдать с зависимостями в useEffect
Сегодня покажу приём, который резко снижает боль от “почему эффект снова сработал” и “ESLint ругается на deps”.
Типичный кейс: в useEffect ты подписываешься на что-то и используешь колбэк/данные, которые постоянно меняются → эффект перезапускается, подписки пересоздаются.
Решение: “стабильный эффект + актуальные данные через ref”
Идея простая:
🔹эффект запускается редко (или 1 раз),
🔹а внутри всегда используются самые свежие значения через ref.
Пример (мини-хук):
function useLatest(value) {
const ref = React.useRef(value);
React.useEffect(() => { ref.current = value; }, [value]);
return ref;
}
Использование:
const onMessageLatest = useLatest(onMessage);
React.useEffect(() => {
const unsub = socket.subscribe((msg) => {
onMessageLatest.current(msg);
});
return unsub;
}, []); // подписка не пересоздаётся
Что это даёт:
🔹подписки/таймеры/листенеры не пересоздаются на каждую мелочь,
🔹зависимости в эффекте становятся честными,
🔹меньше неожиданных “петель”.
✍️
855
6
React
28 мар. 2026 г., 02:16
⚛️ Реактивность - это просто (и всего 35 строк кода)
Мы часто воспринимаем реактивность в современных фреймворках (Vue, Solid, MobX или Preact Signals) как некую "магию". Кажется, что под капотом там сложные механизмы, доступные только избранным архитекторам.
Автор блога romgrk решил развеять этот миф и показал, что базовый движок реактивности можно реализовать буквально за 35 строчек кода.
В статье «Reactivity is easy» он разбирает ключевые концепции:
🔹 Signals (Сигналы) — контейнеры для значений.
🔹 Effects (Эффекты) — функции, которые реагируют на изменения.
🔹 Dependency Tracking — как именно эффект "узнает", на какие сигналы он подписан (спойлер: через глобальный контекст).
Отличный материал для тех, кто хочет перестать бояться "магии" стейт-менеджеров и понять, как всё работает на уровне чистого JS.
👉 Читать статью: https://romgrk.com/posts/reactivity-is-easy
#js #frontend #reactivity #architecture
✍️
1,240
3
React
28 мар. 2026 г., 02:16
📷 Photo
Сегодня хочу поговорить про типичную боль React-разработчиков - лишние ререндеры.
Я регулярно вижу код, где приложение «тормозит», хотя логика простая. В 80% случаев причина банальна: компоненты перерисовываются без необходимости.
Что я проверяю в первую очередь
1️⃣ props меняются по ссылке
Каждый рендер - новый объект → новый ререндер.
Решение: useMemo.
2️⃣ функции создаются заново
onClick={() => doSomething()}
Если компонент обёрнут в memo - он всё равно будет ререндериться.
Решение: useCallback.
3️⃣ memo используется «для галочки»
React.memo без анализа - зло.
Если props всегда новые → memo бесполезен и даже мешает.
4️⃣ state лежит слишком высоко
Когда useState в родителе, а нужен только одному дочернему компоненту - привет лишним обновлениям.
Мой личный чек-лист
💚 Сначала DevTools → Highlight updates
💚 Потом проверяю ссылки
💚 И только в конце - memo, useMemo, useCallback
⚠️ Важно: оптимизация, это не рефлекс, а осознанный шаг. Сначала простота, потом скорость.
✍️
1,460
React
28 мар. 2026 г., 02:16
📷 Photo
🔥 Антипаттерн в 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 — ключ к стабильному и предсказуемому поведению компонентов.
✍️
1,350
React
28 мар. 2026 г., 02:16
🚀 Что такое условный рендеринг в React и зачем он нужен?
Если говорить просто, условный рендеринг - это способность вашего React-приложения решать, что именно показывать пользователю в зависимости от определенных условий (состояния, пропсов и т.д.).
Думайте об этом как о "if... else...", но для вашего пользовательского интерфейса (UI).
- ЕСЛИ пользователь вошел в систему, ТО показать компонент .
- ИНАЧЕ показать компонент .
💡 Для чего он нужен?
Без условного рендеринга все наши приложения были бы статичными. Именно эта концепция делает интерфейс динамическим, "живым" и отзывчивым.
Он нужен буквально повсюду. Вот самые частые примеры:
- Пока идет загрузка данных с сервера: Мы показываем (крутилку). Как только данные пришли — показываем .
- Аутентификация: Показываем "Профиль", если isLoggedIn === true, и "Войти", если isLoggedIn === false.
- Обработка ошибок: Если при загрузке произошла ошибка, мы показываем вместо контента.
- Пустые состояния: Показываем "Ваша корзина пуста", если cart.items.length === 0, и список товаров, если в ней что-то есть.
- Интерактив: Показ/скрытие модальных окон, выпадающих меню или вкладок по клику.
🛠️ Как это сделать?
В React есть несколько популярных способов:
1. Тернарный оператор (? :) - самый частый выбор.
{isLoading ? : }
2. Логический оператор "И" (&&) - идеален, когда вам нужно что-то показать или не показать ничего (нет ветки "else").
{hasMessages && }
3. Обычный if/else - используется внутри тела компонента, до return, для более сложной логики.
Условный рендеринг - это не просто "фича", это сам смысл React. Это то, что позволяет вашему UI реагировать на изменения данных и действия пользователя.
#React #JavaScript #Frontend #Development #ConditionalRendering
✍️
React
18 мар. 2026 г., 19:02
Кастомные хуки (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 (
📏 Размер окна
Ширина: {width}px
Высота: {height}px
{width < 600 ? (
📱 Похоже, вы на мобильном устройстве!
) : (
💻 Это десктопная версия.
)}
);
};
export default App;
✍️
React
18 мар. 2026 г., 19:02
🎯 Сегодня покажу вам простой, но мощный приём: как ускорить React-приложение с помощью мемоизации списков
Каждый из нас рендерит списки: товары, заявки, комментарии, юзеров - список бесконечен.
И одна из самых частых проблем: каждый элемент списка перерендеривается даже при минимальном изменении родителя.
Сегодня разбираем реальный кейс и решение, которое спасает производительность.
🔥 Проблема
У нас есть список задач, и при обновлении одной задачи - перерендериваются все элементы списка.
Визуально это незаметно, но при больших списках производительность падает.
Причина проста: у каждого элемента меняется ссылка на props → компонент считается обновлённым → React перерендеривает его.
💡 Решение: React.memo + useCallback
Вот минимальный рабочий пример.
Компонент элемента списка
const TaskItem = React.memo(function TaskItem({ task, onToggle }) {
console.log("Render:", task.title);
return (
onToggle(task.id)}
/>
{task.title}
);
});
Родитель
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 => (
));
}
🚀 Что это даёт?
- React.memo не даст компоненту перерендериться без изменения реальных данных.
- useCallback создаёт стабильную ссылку на функцию.
- Итог: перерендерятся только изменённые элементы, остальное остаётся нетронутым.
При 500+ элементах разница ощущается моментально.
✍️
1,050
React
18 мар. 2026 г., 19:02
📷 Photo
Headless Component: паттерн для создания пользовательских интерфейсов React
По мере того как элементы управления React UI становятся все более сложными, сложная логика может переплетаться с визуальным представлением. Это затрудняет рассуждения о поведении компонента, затрудняет его тестирование и приводит к необходимости создавать похожие компоненты, которым нужен другой внешний вид. Headless Component извлекает всю невизуальную логику и управление состоянием, отделяя мозг компонента от его внешнего вида.
https://martinfowler.com/articles/headless-component.html
✍️
1,010
5
React
15 мар. 2026 г., 06:53
🧠 Сегодня я покажу вам трюк, который ускоряет ре-рендеры в React на реальных проектах
Иногда компонент начинает перерендериваться слишком часто, даже когда его пропсы не меняются. Особенно это заметно в списках, формах и сложных UI.
Сегодня я расскажу, как я на проектах использую мемоизацию коллбеков и данных, чтобы UI перестал «дергаться».
🔥 Проблема
Допустим, есть список элементов, и каждый элемент получает проп onSelect, который создаётся при каждом рендере родителя:
const handleSelect = id => {
setSelected(id);
};
Каждый раз новая функция → дочерние элементы думают, что проп изменился → ненужный ререндер.
✅ Решение
Используйте useCallback:
const handleSelect = useCallback((id) => {
setSelected(id);
}, []);
Но самое интересное - часто хватает мемоизации не всех, а только “горячих” функций.
Я обычно включаю профайлер, смотрю самые частые ререндеры и мемоизирую только узкие места. Так производительность улетает вверх без лишнего усложнения кода.
🎯 Практическое правило, которое я использую
Мемоизируйте только то, что реально ререндерится слишком часто.
Слепая мемоизация = грязный код.
✍️
1,020
5
React
13 мар. 2026 г., 21:12
Почему 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.
✍️
