❤️ Производительность при рендеринге больших списков

В вашем приложении есть список из 1000+ элементов, который подгружается на страницу сразу. Пользователь жалуется на низкую производительность и долгую загрузку страницы.

❓ Как бы вы улучшили производительность?

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

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

😶 Редкие баги из продакшена

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

Вопрос от подписчика:

«Недавно словили кейс: приложение периодически зависало у пользователей в Южной Америке. Логи — пустые, трейсей нет, на стендах всё стабильно. Подозрения на сеть и какой-то специфичный браузер. Но проверить напрямую — никак. Как вы в таких случаях находите причину и воспроизводите баги?»

❓ Какие техники, инструменты или хитрости помогают вам вылавливать такие баги? Пишите в комментах 👇

P.S. Если хотите задать вопрос, заполните нашу гугл-форму. Это займет 5 минут.

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

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

💬 Фриланс vs найм: что лучше

Выбирать между фрилансом и офисной работой — как решать, что важнее: свобода или безопасность. Оба пути учат, развивают и приносят деньги… но по-разному.

➡️ Фриланс:

— Гибкий график, проекты на вкус
— Быстро прокачиваешь навыки
— Доход выше при умелом подходе
— Каждый день новые вызовы

📎 Нет соцпакета, нестабильный доход, всё на вас

➡️ Корпоратив:

— Стабильная зарплата и соцпакет
— Менторство и карьерный рост
— Процессы уже налажены
— Работа в команде

📎 Менее гибко, проекты выбираете компания, бюрократия

Фриланс и офис не конкурируют, а показывают разные пути развития. Главное — понять, что важнее именно вам.

А вы что выбрали бы: свободу фриланса или стабильность в найме ❓

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

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

🤦‍♀️ Проблемы с порядком после drag & drop

Вы реализуете drag & drop для задач с сохранением порядка через поле order (например, 1, 2, 3…).

После нескольких быстрых перестановок (10+), список отображается неправильно — некоторые задачи «прыгают» на старые позиции при обновлении.

❓ Что с наибольшей вероятностью вызывает эту проблему?

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

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

🙃 Пропавшие уведомления

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

Что скорее всего не реализовано ❓

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

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

💬 Тесты: e2e против unit

У каждого фронтендера был момент: билд зелёный, все unit-тесты проходят, а на проде кнопка «Купить» не работает. Или наоборот — e2e гоняются часами, падают от любого чиха, а баг кроется в двух строках функции.

⚡️ e2e
— Проверяют продукт глазами пользователя
— Сразу видно, что реально сломалось
— Цепляют баги, мимо которых пройдут юнит-тесты

📎 Но: тяжёлые, нестабильные, требуют инфраструктуры и нервов

⚡️ Unit
— Легко писать и поддерживать
— Ловят мелкие баги в логике
— Дают уверенность при рефакторинге

📎 Но: могут показать «всё ок», когда приложение падает в бою

👉 Что важнее: быстро ловить баги в коде или рабочий сценарий для юзера❔

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

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

🤔 SSR и гидратация

Приложение на Next.js отрендерено на сервере. На клиенте после загрузки React «гидратирует» DOM. Вы замечаете ошибку:

“Warning: Text content did not match. Server: ‘100’ Client: ‘101’”.

Что это означает ❓

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

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

🧩 Скрытый баг в списке

{items.map((item, index) => (
  <input
    key={index}
    defaultValue={item.name}
  />
))}

На тесте замечено:

— При удалении элемента данные «съезжают» — значения в инпутах не совпадают с item.name.

— Иногда при редактировании одного поля меняется значение в другом.

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

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

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

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

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

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

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

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

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

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

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

🗿 Незаметные ререндеры

const FiltersContext = createContext({ filters: {} });

function App({ filters, items }) {
  return (
    <FiltersContext.Provider value={{ filters }}>
      {items.map(i => <Item key={i.id} />)}
    </FiltersContext.Provider>
  );
}

— Даже если filters не меняются, при любом апдейте родителя все Item снова ререндерятся.

❓ Почему так происходит?

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

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