Ошибка React 19 с i18next в AgGrid: причины и решение

После обновления проекта на React 19 многие разработчики сталкиваются с ошибкой Minified React error #185 при скролле таблиц AgGrid, использующих i18next для локализации. Проблема возникает в кастомных cellRenderer, где применяется хук useTranslation. Рассмотрим причины и способы устранения.

Почему возникает ошибка React #185 с i18next?

Ошибка #185 в React 19 связана с нарушением правил хуков - хук useTranslation из react-i18next не должен вызываться внутри рендереров, управляемых внешними библиотеками, такими как AgGrid. AgGrid создаёт и уничтожает ячейки динамически, что приводит к нестабильному контексту React и сбоям при скролле.

Основные причины конфликта

• Нарушение порядка хуков: AgGrid может вызывать cellRenderer вне стандартного цикла React, из-за чего useTranslation теряет контекст.
• Несовместимость версий: i18next 25.2.0 и react-i18next 15.5.2 могут не полностью поддерживать новую архитектуру React 19.
• Проблемы с мемоизацией: Простая обёртка в React.memo не решает проблему, так как корень - в вызове хука.

Как исправить ошибку при скролле AgGrid?

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

1. Вынести переводы за пределы cellRenderer

Передавайте локализованные строки через props или используйте getContextMenuItems для предварительной подготовки текста. Пример:

// В колонке AgGrid передаём готовые строки
const columnDefs = [{
  field: 'demand',
  cellRenderer: (params) => {
    const { demand, surplus } = params.value;
    const tooltip = `Спрос: ${demand}, Избыток: ${surplus}`;
    return `<div title="${tooltip}">${demand}</div>`;
  }
}];

2. Использовать useTranslation вне рендерера

Создайте компонент-обёртку на уровне таблицы и передавайте функцию t через контекст или глобальную переменную. Это сохранит стабильный контекст React.

3. Временно откатить react-i18next

Если обновление не критично, используйте версию react-i18next 14.0.0 - она стабильно работает с React 18 и 19 в связке с AgGrid.

4. Использовать useCallback и React.memo правильно

Оберните компонент ячейки в React.memo, а функцию t мемоизируйте через useCallback. Однако этот метод менее надёжен, чем предыдущие.

Дополнительные рекомендации

• Проверьте, что все зависимости обновлены: AgGrid до последней версии, совместимой с React 19.
• Используйте React.StrictMode для выявления скрытых проблем с хуками.
• Рассмотрите альтернативы: react-intl или Lingui, если ошибка не устраняется.

Следуя этим советам, вы сможете устранить ошибку React #185 и сохранить функциональность локализации в AgGrid. Если проблема остаётся, проверьте консоль на наличие других предупреждений - возможно, конфликт вызван сторонними библиотеками.