🧩 Ловушка оптимизации

{orders.map(order => (
  <OrderCard key={order.id} data={order} />
))}

На тесте заметили:

— При 3000 заказах список подлагивает, даже после добавления виртуализации.

— Профайлер показывает сотни повторных ререндеров OrderCard, хотя данные не меняются.

❓ В чём настоящая проблема? Отмечайте правильный эмодзи 👋

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

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

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

Frontend Стажер — удаленно (Чебоксары)

Middle Frontend-разработчик — от 170 000 до 220 000 ₽, удаленно (Новосибирск)

Frontend Engineer — от $99 500 до $200 000 per year, office (New York)

Frontend Developer (React) — удаленно

Junior Frontend Developer — удаленно (part-time)

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

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

#свежак

🚦 Как ловить «висящие» запросы

SPA иногда «залипает» — индикатор крутится, ответа нет. Причина часто в pending-запросах.

1️⃣ Как искать:

— DevTools → Network → сортировка по Status

— Pending-запросы = кандидаты

— Вкладка Initiator покажет, что их вызвало

— Waterfall помогает увидеть длинные цепочки

2️⃣ Фиксы:

— Ставьтете таймауты (axios/fetch):

fetch(url, { signal: controller.signal })

— Отменяйте запросы в cleanup useEffect

— Избегайте дубликатов при повторных монтированиях

📌 Висящие запросы = главный источник «рандомных зависаний» в SPA.

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

#буст

📌 Инструмент недели: Million

Когда React начинает «задыхаться» на тяжёлых списках и таблицах — приходит Million.js. Drop-in библиотека, которая ускоряет рендер до x70 FPS без переписывания всего проекта.

Что умеет:

— Подменяет Virtual DOM React на более быстрый «компилятор»

— Работает как HOC: million/react оборачивает существующие компоненты

— Поддерживает списки, таблицы и часто перерисовывающиеся блоки

Как запустить:

1️⃣ Установка

npx million@latest

2️⃣ Использование

import { For } from 'million/react'

function List({ items }) {
  return (
    <ul>
      <For each={items}>
        {i => <li>{i}</li>}
      </For>
    </ul>
  )
}

💡 Отлично подходит для дашбордов, аналитики и любых «живых» интерфейсов, где много рендеров.

🔗 Ссылка на GitHub

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

#буст

⭐️ Bun снова ускорился

JavaScript-комбайн получил обновление.

В версии 1.2.22 появились:

— Полные async stack traces для удобной отладки.

— До 240x ускорение postMessage и structuredClone для простых объектов.

— Новые возможности в Bun.SQL (MySQL): affectedRows, lastInsertRowid, TLS, поддержка mysql_native_password.

— Улучшения бандлера: оптимизация new Object() → {}, typeof x === "undefined" → компактнее, флаг jsxSideEffects.

— Новый API для диагностики задержек event loop: perf_hooks.monitorEventLoopDelay().

— Апдейты для WebSocket, Redis и Node.js-совместимости.

🔗 Подробности

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

#свежак

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

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

⭐️ Интервью на Middle/Senior Frontend

Видео с живым собесом, где проверяют: React + TypeScript, оптимизация, работа с API, управление состоянием (Redux/MobX/Context), верстка на уровне (Flexbox, Grid), тесты и даже архитектурные подходы.

➡️ Полезно, если хотите понять, что ждут от фронтенд-разработчика с зарплатой 300К+ и как это выглядит на практике.

🔗 Ссылка на видео

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

#буст

📌 Команда дня: поиск неиспользуемого CSS

Оптимизация стилей перед продом:

npx purgecss --css styles.css --content index.html

➡️ --css — путь к стилям

➡️ --content — HTML/JS-файлы, откуда берутся используемые селекторы

➡️ На выходе — список «мёртвых» стилей, которые можно удалить

💡 Советы:

— Можно указать несколько файлов:

--content "./src/**/*.html" "./src/**/*.js»

— Работает с Tailwind, SCSS и шаблонизаторами

— Идеально подходит для прод-сборки: убирает всё лишнее из CSS

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

#буст