🤔 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 снова ререндерятся.

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

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

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