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

Приложение получает уведомления по 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 снова ререндерятся.

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

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

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