React

Сегодня хочу поговорить про типичную боль React-разработчиков - лишние ререндеры. Я регулярно вижу код, где приложение «тормозит», хотя логика простая. В 80% случаев причина банальна: компоненты перерисовываются без необходимости. Что я проверяю в первую очередь 1️⃣ props меняются по ссылке <Component data={{ a: 1 }} /> Каждый рендер - новый объект → новый ререндер. Решение: useMemo. 2️⃣ функции создаются заново onClick={() => doSomething()} Если компонент обёрнут в memo - он всё равно будет рер...

🔥 Антипаттерн в React: избыточные зависимости useEffect Встречали такое? useEffect(() => { fetchData(id); }, [id, fetchData]); ❗️Проблема: fetchData — это функция, которая переопределяется при каждом рендере. В итоге эффект срабатывает чаще, чем должен, даже если id не менялся. 👎 Это вызывает лишние запросы, лаги и баги в логике. 💡 Решения: 1. Обёрнуть в useCallback: const fetchData = useCallback((id: string) => { // ... }, []); 2. Вынести вне компонента (если она не зависит от состояния): co...

useMemo и useCallback - когда они реально помогают, а когда вредят Сегодня разберём больную тему: “обмазался мемоизацией - стало хуже”. Когда useMemo/useCallback НЕ нужны 🔹Значение/функция не передаются в memo - компоненты и не используются как deps. 🔹Вычисление дешёвое (например, arr.map на 20 элементов). 🔹Ты добавил их “на всякий случай”. Побочный эффект: ты усложняешь код и добавляешь лишнюю работу React (хранить кеш, сравнивать deps). Когда они реально спасают 1. Стабильные пропсы для Rea...

🚀 Что такое условный рендеринг в React и зачем он нужен? Если говорить просто, условный рендеринг - это способность вашего React-приложения решать, что именно показывать пользователю в зависимости от определенных условий (состояния, пропсов и т.д.). Думайте об этом как о "if... else...", но для вашего пользовательского интерфейса (UI). - ЕСЛИ пользователь вошел в систему, ТО показать компонент <UserProfile />. - ИНАЧЕ показать компонент <LoginForm />. 💡 Для чего он нужен? Без условного рендери...

⚛️ Реактивность - это просто (и всего 35 строк кода) Мы часто воспринимаем реактивность в современных фреймворках (Vue, Solid, MobX или Preact Signals) как некую "магию". Кажется, что под капотом там сложные механизмы, доступные только избранным архитекторам. Автор блога romgrk решил развеять этот миф и показал, что базовый движок реактивности можно реализовать буквально за 35 строчек кода. В статье «Reactivity is easy» он разбирает ключевые концепции: 🔹 Signals (Сигналы) — контейнеры для значе...

❌ Избегайте «прокидывания» пропсов (prop-drilling) для расширения компонентов ✅ Вместо этого используйте композицию ✍️ @React_lib

Этот пост выкуплен под рекламную интеграцию. Но здесь будут скрины от участников frontend-менторства Тихона Галактионова и подборка полезных материалов: 👉100 вопросов, которые точно помогут тебе на собеседовании: ссылка 👉Подборка из 100+ каналов с вакансиями для разработчиков: ссылка 👉10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS: ссылка 👉Чек лист проверки своего резюме: ссылка 👉Разбор самых популярных и каверзных вопросов на собесах: ссылка 👉Лайф...

Как frontend-разработчику получить оффер в Big Tech? Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные. Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK... Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроить...

Как перестать страдать с зависимостями в useEffect Сегодня покажу приём, который резко снижает боль от “почему эффект снова сработал” и “ESLint ругается на deps”. Типичный кейс: в useEffect ты подписываешься на что-то и используешь колбэк/данные, которые постоянно меняются → эффект перезапускается, подписки пересоздаются. Решение: “стабильный эффект + актуальные данные через ref” Идея простая: 🔹эффект запускается редко (или 1 раз), 🔹а внутри всегда используются самые свежие значения через ref....

Почему React-приложение “лагает” при вводе в инпут - и как починить за 3 минуты Сегодня покажу классическую ситуацию: у тебя есть форма/поиск, ты печатаешь и интерфейс начинает подтормаживать. Чаще всего причина одна: на каждый onChange ты триггеришь тяжёлый ререндер (фильтрация, сортировка, построение списков, пересчёт графиков, сложные компоненты). Быстрая диагностика 1. Открой React DevTools → Profiler 2. Запиши ввод в поле 3. Посмотри, кто ререндерится и сколько времени занимает Три быстрых ...