🚀 Как ускорить React на 300%: реальный кейс

Виртуальный DOM — вещь полезная, но не всемогущая. Если каждый клик запускает цепочку ререндеров, он не спасёт. Со временем даже шустрое React-приложение превращается в тормозящего гиганта.

Что в статье:

📍 Разбор реального кейса: как e-commerce приложение превратилось из быстрого в тормозное, и что помогло это исправить

📍 Причины медленной работы: ненужные ререндеры, монолитные компоненты, неоптимальный context

📍 Использование инструментов: React DevTools, why-did-you-render, профилирование

📍 Практические примеры кода «до» и «после»

📍 Хаки и техники: React.memo, useCallback, useMemo, react-window, динамическая загрузка компонентов

🔗 Читать статью

🐸 Библиотека фронтендера

🙂 Как не утонуть в дедлайнах и при этом успевать жить

Иногда кажется, что жизнь — это просто список задач в Jira. Только без кнопки “Complete” и с багами в расписании. Когда работаешь фронтендером, особенно в стартапе или на жестком проекте, легко потеряться между фичами, срочными хотфиксами и «вот это надо было ещё вчера».

Моя история:

Был у меня период, когда я всерьёз думал, что «выйти в оффлайн» — это привилегия. Дни сливались в один длинный поток: созвон — коммит — правка — деплой — баг — снова правка.
Я ел на бегу, спал плохо, даже выходные проваливались в режим «да я тут чуть-чуть подфикшу, это на 5 минут» (никогда не 5 минут).

Однажды просто поймал себя на мысли:
«А я вообще живу, или просто существую между спринтами?»

С тех пор стал менять подход:

• Планировать не только работу, но и отдых. Прям в телефоне ставил напоминание «погулять» или «позвонить другу».

• Старался заканчивать день в нормальное время, даже если не всё сделал. Потому что «успеть всё» — это миф.

• Начал говорить честно команде, если не вывозил. Без героизма. Просто по-человечески.

• И главное — напоминал себе, что я не машина. Я не создан быть продуктивным 24/7.

💡 Что понял:

Работа — важна. Но если ты сам выпадаешь из жизни, то и смысла в этих дедлайнах немного. А фронтенд — он никуда не денется. Зато твоё здоровье и счастье — может.

А вы как справляетесь, когда накрывает волной задач? Что помогает не терять себя?

Делитесь в комментариях ⬇️

🐸 Библиотека фронтендера

#междусобойчик

😎 Zustand и DevTools: лайфхаки для управления состоянием в React

Интеграция библиотеки Zustand с React DevTools превращает её в мощный инструмент для быстрого отслеживания и отладки состояния в реальном времени.

1️⃣ Сначала установим Zustand

npm install zustand

Или с использованием yarn:

yarn add zustand

Также убедитесь, что у вас установлены React DevTools в браузере.

2️⃣ Теперь добавим поддержку DevTools в ваше хранилище Zustand. Для этого оборачиваем хранилище в devtools middleware:

import create from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(devtools((set) => ({
bears: 0,
increase: () => set((state) => ({ bears: state.bears + 1 })),
decrease: () => set((state) => ({ bears: state.bears - 1 }))
})));

Использование Redux DevTools для дополнительных функций

Если вы хотите использовать расширенные возможности, такие как time travel (перемещение по истории состояния), вы можете настроить Redux DevTools с Zustand.

3️⃣ Установим Redux DevTools:

npm install simple-zustand-devtools --dev

Или:

yarn add simple-zustand-devtools --dev

4️⃣ Подключим Redux DevTools:

import create from 'zustand';
import { mountStoreDevtool } from 'simple-zustand-devtools';

const useStore = create((set) => ({
bears: 0,
increase: () => set((state) => ({ bears: state.bears + 1 })),
decrease: () => set((state) => ({ bears: state.bears - 1 }))
}));

if (process.env.NODE_ENV === 'development') {
mountStoreDevtool('Store', useStore);
}

Какие плюсы это использовать:

➡️ Вы легко увидите, как меняется ваше состояние при каждом действии, что помогает быстро находить ошибки.

➡️ Перемещайтесь по истории состояний, чтобы понять, что именно изменилось, и как это повлияло на приложение.

➡️ React DevTools предоставляет удобный интерфейс, который позволяет отслеживать состояние и взаимодействовать с ним без необходимости писать дополнительный код.

➡️ Если в вашем проекте используется несколько хранилищ Zustand, вы сможете отслеживать их изменения одновременно, что особенно полезно в крупных приложениях.

🐸 Библиотека фронтендера

#буст

💧📈 Как сделать гидратацию в React 19 по настоящему эффективной

До выхода React 19 процесс гидратации оставлял желать лучшего: проблемы с производительностью, избыточное выполнение JavaScript и задержки в интерактивности тормозили создание быстрых и отзывчивых приложений.

В статье рассказывается про то, как:

1️⃣ Новые подходы в React 19 изменяют процесс гидратации

2️⃣ Выборочная и прогрессивная гидратация позволяют ускорить взаимодействие с пользователем

3️⃣ Потоковый серверный рендеринг с Suspense снижает нагрузку на клиент

4️⃣Серверные компоненты устраняют необходимость в гидратации для статических частей интерфейса.

Как новые возможности React 19 помогут вам создавать быстрее загружающиеся и более отзывчивые приложения, читаем по ссылке ⬇️

Статья 🔗

� Библиотека фронтендера

💭 Документация у него в голове

🐸Библиотека фронтенда

#развлекалово

🚬 TypeScript вне учебников: продвинутая подборка для тех, кто уже в теме

1️⃣ 15 Advanced TypeScript Tips and Tricks You Might Not Know

Автор делится продвинутыми приёмами TypeScript, включая использование infer, шаблонных литералов и других мощных фич.

2️⃣ Thoughts on State Management Libraries in the React Compiler Era

Обзор изменений в управлении состоянием с приходом React Compiler и как это влияет на необходимость использования сторонних библиотек.

3️⃣ Zod: TypeScript-first Schema Validation

Zod предлагает декларативный подход к валидации схем с автоматическим выводом типов, упрощая разработку и повышая надёжность кода.

🐸 Библиотека фронтенда

#свежак

🌸 Вопросы с собеседований: что такое замыкания (closures)

Замыкание — это функция, которая «запоминает» свою лексическую среду, даже когда она выполняется за пределами этой среды. Замыкания позволяют функции доступ к переменным, которые были объявлены в её внешнем контексте.

На фото функция inner сохраняет ссылку на переменную count из функции outer, создавая замыкание.

🐸 Библиотека фронтенда

#междусобойчик

😳 Топ-вакансий для фронтендеров за неделю

Frontend Developer — удаленка/Офис (Москва/Санкт-Петербург)

Frontend Developer (Vue.js) — от 250 000 ₽, удаленно (Москва)

Разработчик JS (Middle) — от 150 000 ₽ до 300 000 ₽, удаленно (Казань)

Frontend-разработчик — офис (Санкт-Петербург)

Frontend-разработчик — 180 000 - 190 000 ₽, удаленно (Москва)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

🐸 Библиотека фронтендера

#свежак

🔧 Как устранить FOUC

FOUC (Flash of Unstyled Content) — это кратковременное отображение неоформленного HTML перед применением CSS, что может негативно сказаться на пользовательском опыте.

Почему возникает:

📍 Асинхронная загрузка стилей.

📍 Динамические изменения DOM через JavaScript до полной загрузки стилей.

📍 Использование async или defer при подключении скриптов, что может привести к несогласованности в порядке загрузки ресурсов.

Как устранить:

1️⃣ Предзагружаем критичные стили

<link rel="preload" href="/styles/main.css" as="style">

2️⃣ Встраиваем Critical CSS прямо в HTML

<style>
body { margin: 0; font-family: system-ui; }
</style>

Таким образом, мы обеспечиваем мгновенное появление базового оформления без скачков.

3️⃣ Минимизируем блокировки рендера

• Добавляем defer к скриптам
• Переносим второстепенные стили вниз
• Избавляемся от лишних <link> в <head>

4️⃣ Оптимизируем изображения

Пересобираем графику в WebP или AVIF, уменьшаем вес — и пользователь видит контент быстрее.

5️⃣ Переходим на SSR

Используем серверный рендеринг (Next.js, Astro и др.), чтобы отправлять уже отрендеренную страницу, а не заставлять браузер гадать, как это должно выглядеть.

💡Следуя приведённым рекомендациям, вы сможете обеспечить плавное и профессиональное отображение вашего веб-приложения с самого начала.

🐸 Библиотека фронтендера

#буст

🚫💻 Топ-10 ошибок эволюции интернета: что бы разработчики удалили из современного веба

Сегодняшний интернет — это не только мемы и котики, но и автозапуск видео, всплывающие окна, перегруженный JavaScript, странные архитектурные решения прошлого.

В статье разбираем:

➡️ Какие элементы веба вызывают наибольшую боль у разработчиков

➡️ Почему соцсети, реклама и куки заслуживают изгнания

➡️ Как ошибки типа referer и злоупотребление WordPress превратились в технический долг

➡️ Что бы изменили в JavaScript, если бы можно было откатить всё назад

➡️ Идеи для нового, более логичного и безопасного интернета

Мечты о «перезапуске» веба с чистого листа — это не фантастика, а повод задуматься: а не пора ли нам пересмотреть старые решения?

🔗 Читаем статью по ссылке

🐸 Библиотека фронтендера

🔍 Инструмент недели: Lighthouse — карманный инспектор сайта

Если бы у сайтов был техосмотр — Lighthouse был бы тем самым инспектором с линейкой и скептическим выражением лица. Но вместо «у вас тормоза» он говорит «у вас LCP 4.5 сек».

Зачем нужен:

📍 Проверка производительности:

замеряет, насколько быстро твой сайт появляется, становится интерактивным и не убивает пользователя скелетонами на 10 секунд.

📍 SEO и доступность:

проверяет базовые требования поисковой оптимизации: наличие заголовков, мета-описания, канонических ссылок, индексации и пр.

📍 PWA-анализ:

для прогрессивных веб-приложений Lighthouse проводит полный аудит, включая работу оффлайн, наличие manifest.json и service worker.

📍 Профиль UX как на ладони:

проверяет безопасность, использование современных API, корректность HTTPS, ошибки в консоли и другие важные аспекты качества веб-приложения.

Как использовать:

1️⃣ Открываем сайт в Chrome, жмём F12 → вкладка Lighthouse

2️⃣ Настраиваем параметры: мобильный/десктоп, какие категории проверять

3️⃣ Жмём «Generate report» и наблюдаем, как твоё творение превращается в 4 цветных кружка

А если хочется как профи:

• Устанавливаем Lighthouse CLI:

npm install -g lighthouse

• И запускаем тест прямо из терминала:

lighthouse https://example.com --view

• Можно даже засунуть это в CI и отгонять плохие коммиты до релиза.

📍 Полезные материалы:

— Lighthouse Docs от Google
— Сравнение Lighthouse и PageSpeed Insights

🐸 Библиотека фронтендера

#буст

У кого не так, счастливые вы люди.. 😳

🐸 Библиотека фронтендера

#развлекалово