🚀 Автоматическая оптимизация React-приложений

21 апреля 2025 года команда React представила релиз-кандидат (RC) React Compiler — инструмента, который автоматически внедряет мемоизацию в вашем коде, улучшая производительность без необходимости ручного использования useMemo, useCallback или React.memo .

Что нового:

➡️ Авто-мемоизация: React Compiler сам определяет, где нужна мемоизация, и внедряет её без вашего участия — меньше лишних ререндеров, больше производительности.

➡️ Объединение ESLint-плагинов: react-compiler теперь встроен в react-hooks (с версии 6.0.0-rc.1) — настройка проще, подсказки умнее.

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

⚠️ На что обратить внимание:

— Работает с React 17+, но для версий до 19 нужно подключить react-compiler-runtime и указать минимальную версию в настройках.

— Если код нарушает правила React (например, ref в рендере), компилятор просто пропускает такие места.

— Некоторые проверки (например, ref-in-render) временно отключены, чтобы избежать ложных срабатываний.

🔗 Инструкция как использовать

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

#свежак

😄😜

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

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

🤩 Темная тема в приложениях: забота о пользователях или дань моде

В 2025 году отсутствие темной темы — это как прийти на собеседование в пижаме: вроде можно, но все сделают вид, что ты — ошибка природы.

➡️ Почему все так обожают темную тему:

😗 Меньше убивает глаза ночью. Особенно когда третью бессонную ночь ищешь баг, который был в одной строке.

😗 Бережет батарейку. OLED-дисплеи в экстазе. Правда, процессор твой уже треснул от количества рендеров, но кого это волнует?

😗 Выглядит «умно и технологично». В тёмной теме даже TODO-приложение кажется серьезным проектом.

➡️ Почему темная тема — это часто просто маркетинговая пыль в глаза:

➖ Контент сливается в черную кашу. Когда серый текст на черном фоне видишь только под микроскопом и с молитвой.

➖ Поддерживать две темы — это в дважды больше багов. Пару переключений темы — и твой «идеальный» UI начинает вести себя как шизофреник.

➖ Не всегда нужна. Есть приложения, где светлая тема объективно удобнее, но кто будет спорить с модой?

❓ И тут резонный вопрос:

Темная тема — это действительно забота о пользователе, или просто ещё одна галочка в бесконечном списке «фич ради фич»?

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

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

📣 Дайджест материалов за неделю

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

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

🔘 Апрельские выпуски подкаста PodRocket

🔘 Команда дня: npx browserlist

🔘 React Compiler RC: автоматическая оптимизация React-приложений

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

#свежак

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

Middle Frontend-разработчик (Angular) — удаленно (Москва)

Dev Team Lead — 350 000 —‍ 450 000 ₽, удаленно (Москва)

Senior Frontend Developer — офис/гибрид (Москва)

Frontend-разработчик — 180 000 —‍ 240 000 ₽, офис/гибрид (Екатеринбург/Новокузнецк)

TypeScript Developer — 3 500 —‍ 5 000 €, удаленно (Литва)

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

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

#свежак

⚡ Новые фреймворки и мета-фреймворки

➡️ Solid.js — легковесный фреймворк без виртуального DOM, обеспечивающий высокую производительность за счет тонкой реактивности и минимального размера бандла.

➡️ Qwik — фреймворк, ориентированный на мгновенную загрузку страниц, с поддержкой серверного рендеринга и оптимизированной гидратацией.

➡️ Analog — новый фреймворк, сочетающий преимущества серверного рендеринга и статической генерации, с акцентом на производительность и простоту использования.

➡️ React Router v7 — переименованный Remix, теперь объединяет возможности серверного рендеринга и клиентского маршрутизатора, предлагая более гибкую архитектуру.

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

#свежак

🚀 Redis представляет LangCache и Vector Sets — инструменты для ускорения AI-приложений

Redis, который мы все привыкли видеть как «быстрый кэш для бэка«» внезапно делает шаг в сторону AI — и это может пригодиться и нам, фронтендерам.

Недавно они выкатили два новых инструмента:

🔴 LangCache

Это умное семантическое кэширование — Redis сам понимает, что кэшировать, чтобы запросы к LLM (типа ChatGPT) летали быстрее.
Представьте: вы делаете чат с ИИ, и Redis помогает не гонять одинаковые вопросы по 100 раз, а отвечает из памяти, как будто сам ChatGPT запомнил всё.

🔴 Vector Sets

Теперь Redis может хранить и искать вектора — например, эмбеддинги от нейросетей. Это открывает дорогу к реализации умного поиска или рекомендаций прямо у себя, без тяжёлых внешних API.

А что фронту:

➡️ Быстрее и дешевле LLM-интеграции. Теперь можно кэшировать ответы от ИИ — это снижает задержки и экономит токены.

➡️ Интеллектуальные фичи — «похожие товары», «что-то на эту тему», и даже поиск по смыслу — становятся реальными без сложных бэков.

➡️ Всё это уже можно подключить через Node.js или edge-фреймворки типа Next.js / Remix.

🔗 Читать подробнее

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

#свежак

🧩 Как сгенерировать нужный кусок кода за секунды: промпт для ChatGPT

Мелкие, но регулярные задачи вроде хуков, адаптивных блоков или забытого fetch с таймаутом съедают часы. Вместо бесконечного гуглинга — спроси у ИИ.

Один из наиболее практичных промптов из блога Requestly помогает именно с этим:

🔴 PROMPT:

Generate a code snippet for [specific task]

Например:

“Generate a code snippet for a custom React hook that syncs state with localStorage”

Чем полезен этот промпт:

1️⃣ Код появляется за пару секунд — без лишнего гуглинга.

2️⃣ ChatGPT объясняет, как и почему всё работает.

3️⃣ Подходит под любой стек — от React до Tailwind.

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

#буст

Спасибо, что сегодня последний рабочий день на неделе 🙂

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

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

❓ Как починить баг, когда onChange в React не срабатывает

Проблема: ты повесил onChange на input, но он не триггерится. Или работает, но странно: с задержкой, через раз, или вовсе игнорирует ввод.

Возможные причины и решение:

1️⃣ Компонент неконтролируемый (uncontrolled):

<input defaultValue="test" onChange={handleChange} />

📛 onChange может не срабатывать стабильно, особенно если не следить за value.

Решение: переводи компонент в контролируемый:

const [value, setValue] = useState('');
<input value={value} onChange={(e) => setValue(e.target.value)} />

2️⃣ Используешь onInput вместо onChange:

Это не одно и то же. onInput срабатывает чаще, но может работать по-разному в разных браузерах.

Решение: если нужен универсальный UX — лучше onChange, особенно для форм.

3️⃣ Слишком агрессивный debounce или throttle:

const debouncedHandler = debounce((e) => doSomething(e.target.value), 500);
<input onChange={debouncedHandler} />

📛 Если debounce неправильно настроен, ввод «глушится».

Решение: убедись, что debounce работает корректно и не отваливается при e.persist() или вне зоны контроля React.

Пиши компонент осознанно: React не про «оно само заработает».

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

#буст

🤝 Мгновенное дублирование строки или блока в VSCode

Shift + Alt + ↓ / ↑

— дублирует текущую строку или выделенный блок вниз / вверх.

Зачем это нужно:

• Быстро копировать блоки кода без использования буфера обмена.

• Ускоряет повторяющиеся шаблоны, особенно в вёрстке или React-компонентах.

• Работает с несколькими курсорами — мощный инструмент для продуктивности.

💡 Совмести с Alt + Click для создания нескольких курсоров — и обновляй дублированные блоки одновременно.

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

#буст

🎙 Frontend Mix 2025: как защитить, оживить и ускорить фронтенд

ЮMoney и Сбер собрали фронтенд-инженеров в Петербурге, чтобы обсудить практики, которые реально работают в продакшене.

Запись уже доступна, а мы кратко делимся, что было ⬇️

🟥 Рефакторинг за секунды: показали, как через jscodeshift и CLI-инструменты массово обновлять код без боли.

🟥 Анимации без лагов: секреты плавных интерфейсов: FLIP, requestAnimationFrame, CSS-трюки.

🟥 Безопасность в финтехе: как не дать сломать ваш фронт: защита от XSS, supply-chain атак, фишинга.

🟥 Тестирование UI: показали, как грамотно покрывать фронт без фанатизма.

🔗 Смотреть запись митапа

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

#буст

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

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

🐰 Что такое область видимости в JavaScript

Область видимости (scope) — это правила, по которым переменные «видны» в разных частях кода.

Основные виды:

• Глобальная — переменная доступна везде.

• Функциональная — только внутри функции.

• Блочная (let, const) — только внутри фигурных скобок { }.

function test() {
let msg = "Hi!";
}
console.log(msg); // Ошибка: msg не существует вне функции

Почему так:

msg создана внутри функции и доступна только там. Вне — она как будто не существует.

💡 Зачем понимать scope:

• Избегаешь конфликтов между переменными.

• Пишешь чистый и предсказуемый код.

• Не ловишь ошибки из-за «невидимых» переменных.

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

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

📣 Подборка статей для старта в карьере

🔘 Что с работой в IT в 2025 году: обзор от TheCode.Media, анализирующий текущее состояние рынка труда в IT, включая востребованные профессии, зарплаты и влияние нейросетей.

🔘 Фронтенд в 2025 году: тренды, которые изменят разработку

🔘 Как войти в IT в 2025 году и не потратить на это 10 лет: практическое руководство от Хабра, предлагающее советы начинающим специалистам по выбору ниши, обучению, созданию пет-проектов и поиску работы.

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

#свежак