🔍 React Scan — автоматический поиск проблем производительности в React

Удобный инструмент для React-разработчиков, который визуально показывает, какие компоненты тормозят ваше приложение.

Главные фичи:

— Не требует изменений в коде
— Подсвечивает компоненты, которые нужно оптимизировать
— Работает везде: script tag, npm, Next.js, Vite, Remix

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

Просто добавьте один script tag:

<script src="//unpkg.com/react-scan/dist/auto.global.js"></script>

🔗 Cсылка на GitHub

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

#stack #react

📎 Как выбрать между useEffect и useLayoutEffect

🔢 useEffect — после отрисовки (не блокирует UI)

Типичный кейс: побочный эффект не влияет на layout.

import { useEffect, useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Кликов: ${count}`;
  }, [count]);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Клик: {count}
    </button>
  );
}

Почему useEffect:

• отрисовка не зависит от эффекта
• возможна задержка без визуальных артефактов

🔢 useLayoutEffect — до отрисовки (блокирует paint)

Типичный кейс: нужно измерить DOM до того, как пользователь увидит экран.

import { useLayoutEffect, useRef, useState } from "react";

export function Box() {
  const ref = useRef(null);
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    setWidth(ref.current.getBoundingClientRect().width);
  }, []);

  return (
    <>
      <div
        ref={ref}
        style={{ width: 120, height: 40, background: "red" }}
      />
      <p>Ширина: {width}px</p>
    </>
  );
}

Почему useLayoutEffect:

• getBoundingClientRect должен выполниться до paint
• иначе возможен визуальный “прыжок” интерфейса

📍 Навигация: [Вакансии]

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

#readme #react

⚠️ Перестаньте писать fetch в useEffect

useEffect + fetch выглядит просто, но в реальном приложении быстро обрастает ручной логикой:

🟠 управление загрузкой и ошибками
🟠 отмена запросов и гонки
🟠 дублирование кода
🟠 отсутствие кэша и дедупликации

Современный подход — TanStack Query. Он берёт на себя работу с серверным состоянием: кэш, ретраи, автоотмену и обновление данных без ручной рутины.

✏️ Это не «запрет», а рекомендация из документации React:

для загрузки серверных данных лучше использовать специализированные библиотеки, которые берут на себя кэширование, дедупликацию и управление асинхронным состоянием.

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

#hotfix #react

⚠️ StrictMode перезапускает эффекты (dev-ловушка)

useEffect(() => {
  initAnalytics();
}, []);

На вид — инициализация один раз.

🔵 На деле (в dev):

— React в StrictMode выполняет дополнительный цикл
setup → cleanup → setup
— аналитика / подписки / запросы могут выполняться повторно
— баг выглядит как «только у меня локально»

♾ Почему так:

Это dev-only проверка в React 18+, чтобы находить неидемпотентные сайд-эффекты и отсутствие cleanup.

✅ Правильный фикс: реализовать cleanup

useEffect(() => {
  const dispose = initAnalytics(); // возвращает отписку

  return () => {
    dispose?.();
  };
}, []);

Cleanup должен полностью зеркалить всё, что было создано в effect.

✅ Если SDK не поддерживает cleanup — делайте init идемпотентным

// analytics.ts
let inited = false;

export function initAnalyticsOnce() {
  if (inited) return;
  inited = true;
  initAnalytics();
}

useEffect(() => {
  initAnalyticsOnce();
}, []);

♾ В production StrictMode не добавляет этот дополнительный цикл — поведение отличается только в dev.

📍 Навигация: [Вакансии]

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

#hotfix #react

⚡️ 5 способов избежать багов при работе с массивами

Массивы чаще ломают состояние не ошибкой, а мутацией. Ниже — краткая шпаргалка, которая особенно полезна в React.

🔴 Не мутируйте: map / filter вместо push / splice

const added   = [...items, newItem]
const removed = items.filter(x => x.id !== id)
const updated = items.map(x =>
  x.id === id ? { ...x, done: true } : x
)

push, splice, sort, reverse меняют исходный массив.

🔴 find — один элемент, filter — список

const user   = users.find(u => u.id === id)
const admins = users.filter(u => u.role === "admin»)

Если нужен один — используйте find. Это и быстрее, и чище по логике.

🔴 some / every вместо ручных флагов

const hasError = items.some(x => !x.valid)
const allReady = items.every(x => x.ready)

Читается лучше, чем цикл с переменной-флагом.

🔴 Объекты сравниваются по ссылке

items.includes({ id: 1 }) // почти всегда false

✅ Правильно:

items.some(x => x.id === 1)

В JS объекты равны только если это одна и та же ссылка.

🔴 Копирование без мутации

const copy = [...arr] // поверхностная копия

Вложенные объекты остаются по ссылке. Обновляйте их через spread на каждом уровне.

📍 Навигация: [Вакансии]

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

#readme #react

⭐️ React one-liner для работы с children

const items = Children.toArray(children);

Нужен, когда children надо безопасно превратить в массив и дальше обработать через slice, filter или map. Полезно в wrapper-компонентах, tabs и compound components — но без фанатизма: сам React считает Children API скорее редким и ситуативным инструментом.

Например:

const firstChild = Children.toArray(children)[0];

📍 Навигация: [Вакансии]

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

#readme #react

🧩 React под рукой: вся база в одной шпаргалке

Что внутри:

— JSX и структура React-элементов
— компоненты: props, children, условный рендеринг
— списки, memo и Context
— все ключевые хуки: от useState до useMemo
— class components и lifecycle (на случай легаси)
— error boundaries и обработка ошибок

Подойдёт новичкам как карта React и тем, кто уже работает и хочет быстрее ориентироваться.

📍 Навигация: [Вакансии]

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

#readme #react

📁 React без лишней теории

Короткий конспект по React на 100+ страниц:

— компоненты, props, state
— формы, lifecycle, роутинг
— AJAX, производительность
— Redux, HOC, SSR, TypeScript

Это не учебник, а выжимка практики и решений из Stack Overflow.

⚡️ А если хотите параллельно зайти в новую прикладную тему — сейчас открыт набор на курс по ИИ-агентам. Набор закрывается 30 апреля, осталось 4 места. 👉 Занять место по ссылке

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

#readme #react

👩‍💻 React лучше всего учится не по туториалам, а через pet-проекты

Нашли большой репозиторий с идеями React-проектов разного уровня — от простых счётчиков и Todo до SaaS Dashboard, WebRTC и AI Chat UI.

Внутри проекты разделены по уровням:

🟢 Beginner
🟡 Intermediate
🔴 Advanced

Полезно, если:

— не знаете, что сделать для портфолио
— хотите практиковать React на реальных задачах
— ищете идеи для pet-проекта
— готовитесь к frontend-собеседованиям

🔗 Ссылка на GitHub

📍 Навигация: [Вакансии]

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

#stack #react

✅ Правильный ответ: React повторно вызовет родителя и его дочерние компоненты

При изменении state React заново вызывает render родительского компонента и по умолчанию проходит по его дочернему дереву. Даже если props дочернего компонента не изменились, его render-функция всё равно может быть вызвана повторно.

Чтобы избежать лишних ререндеров используют:

— React.memo
— useMemo
— useCallback

🔜 Идеальный короткий ответ:

Изменение state родителя по умолчанию запускает повторный render родителя и обход его дочернего дерева.

👍 — знал/а
🔥 — стало понятнее

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

#career_merge #react

👩‍💻 React Router готовится к v8

В React Router 7.16.0 стабилизировали флаг v8_trailingSlashAwareDataRequests и добавили предупреждения о настройках, которые понадобятся для перехода на v8.

➡️ Также в релиз вошли исправления для:

— useNavigation() и TypeScript-типов
— кастомных window-контекстов
— Node.js streams и backpressure
— Express-адаптера
— работы ассетов между Windows и Linux

🔗 Источник

📍 Навигация: [Вакансии]

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

#release_digest #react

🧩 Когда callback ref лучше useEffect

Если нужно выполнить действие сразу после появления DOM-элемента, часто можно обойтись без useEffect.

Например:

— установить фокус
— измерить размеры элемента
— подключить Observer
— инициализировать библиотеку

➡️ Преимущества callback ref:

— меньше кода
— не нужен дополнительный рендерный цикл через useEffect
— логика находится рядом с элементом

⚠️ Но callback ref не является заменой useEffect. Для подписок, запросов и побочных эффектов по-прежнему нужен useEffect.

📍 Навигация: [Вакансии]

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

#readme #react

🌳 Готовый File Explorer для веб-приложений

Trees — open-source библиотека для создания файловых менеджеров и IDE-подобных проводников.

Из коробки поддерживает:

— поиск по файлам
— drag-and-drop
— выделение элементов
— Git-статусы
— вложенные директории
— навигацию с клавиатуры

➡️ Подойдёт для:

— редакторов кода
— внутренних инструментов
— файловых менеджеров
— developer-платформ

🔗 Ссылка

📍 Навигация: [Вакансии]

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

#stack #react

🚀 React окончательно отделяется от Meta*

React Foundation запустил собственный сайт, а GitHub-репозиторий переехал с facebook/react на react/react.

Для разработчиков ничего не меняется в API или коде.

🔜 Но организационно это важный шаг: с февраля 2026 года React, React Native и JSX официально развиваются под управлением независимого фонда React Foundation в составе Linux Foundation.

*Meta признана экстремистской организацией в РФ

📍 Навигация: [Вакансии]

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

#release_digest #react

🖥 Шпаргалка по React Hooks

Собрали небольшой файл по основным хукам React — с примерами и быстрыми пояснениями.

Внутри:

— useState и useReducer
— useEffect и useLayoutEffect
— useContext
— useMemo и useCallback
— useRef и useImperativeHandle
— Custom Hooks

Полезно для повторения, подготовки к собеседованию и ежедневной разработки на React ✅


📍 Навигация: [Вакансии]

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

#артефакт #react

📌 330+ вопросов по React для подготовки к собеседованиям

Если готовитесь к поиску работы или хотите освежить знания, сохраните эту шпаргалку.

• JSX, компоненты, props и state;
• Hooks и жизненный цикл;
• Virtual DOM и Reconciliation;
• Context API и Redux Toolkit;
• React Router;
• оптимизация производительности;
• тестирование (Jest);
• SSR и основы Next.js;
• распространённые ошибки и лучшие практики.

🔗 Источник

📍 Навигация: [Вакансии]

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

#readme #react #career_merge

🔥 Больше useMemo ≠ быстрее React-приложение

Когда приложение начинает тормозить, многие сразу добавляют useMemo, useCallback или React.memo. На практике главный прирост производительности чаще дает архитектура компонентов.

Что действительно помогает:

🔵 держать состояние как можно ближе к месту использования;
🔵 не поднимать state выше, чем это необходимо;
🔵 уменьшать количество лишних ререндеров;
🔵 использовать мемоизацию только там, где она действительно оправдана.

📍 Навигация: [Вакансии]

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

#under_hood #react

💡 6 принципов современного React Data Grid

Хороший Data Grid помогает быстрее находить информацию, снижает количество ошибок и остается отзывчивым даже при работе с большими объемами данных.

Вот что считается хорошей практикой:

✅ Условное форматирование вместо лишнего текста

Цвета, бейджи и иконки позволяют мгновенно увидеть статус, предупреждение или критичное значение.

✅ Дизайн-токены вместо хардкода цветов

Цвета, отступы и типографика должны наследоваться от общей дизайн-системы, а не быть разбросаны по CSS.

✅ Поддержка dark mode

Таблица должна одинаково хорошо выглядеть в светлой и темной теме, сохраняя контраст и читаемость.

✅ Виртуализация + легкие CSS-классы

Для больших наборов данных виртуализируйте строки и избегайте тяжелых инлайновых стилей и лишних перерисовок.

✅ Доступность по умолчанию

Поддержка клавиатурной навигации, Screen Reader, фокус-состояний и достаточного контраста — уже базовое требование.

✅ Адаптивность

На планшетах и небольших экранах таблица должна корректно менять ширину колонок, сохраняя удобство работы.

📍 Навигация: [Вакансии]

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

#blueprint #react

👾 Превращаем SVG и текст в 3D-компоненты для React

3dsvg.design — бесплатный браузерный инструмент, который превращает обычные SVG, текст и простую графику в объёмные интерактивные элементы.

Можно:

— загрузить SVG или добавить текст;
— настроить глубину, освещение и положение объекта;
— сразу посмотреть результат в браузере;
— экспортировать готовый React-компонент и вставить код в проект.

Полезно для лендингов, hero-блоков и интерфейсов, где хочется добавить 3D без ручной работы с WebGL.

📍 Навигация: [Вакансии]

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

#stack #react