Setting i18n on a Dashboard leads to: Error: Maximum update depth exceeded

[olaf-2]

Description

Using Hilla React after upgrading Vaadin from 24.6.6 to 24.7.0 the following error occurs in the browser when I set the i18n property on a Dashboard:

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. at checkForNestedUpdates (http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/.vite/deps/chunk-UJKGNB4G.js?v=aa822fbb:19712:19) at scheduleUpdateOnFiber (http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/.vite/deps/chunk-UJKGNB4G.js?v=aa822fbb:18583:11) at dispatchReducerAction (http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/.vite/deps/chunk-UJKGNB4G.js?v=aa822fbb:12399:15) at http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/.vite/deps/chunk-RIZVV2JU.js?v=aa822fbb:33:177 at http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/@vaadin/bundles/vaadin.js?v=aa822fbb:120464:15 at NodeList.forEach (<anonymous>) at Dashboard.__itemsOrRendererChanged (http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/@vaadin/bundles/vaadin.js?v=aa822fbb:120453:111) at http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/@vaadin/bundles/vaadin.js?v=aa822fbb:110778:31 at Map.forEach (<anonymous>) at Dashboard.__runComplexObservers (http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/@vaadin/bundles/vaadin.js?v=aa822fbb:110773:23)

at http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/.vite/deps/chunk-6VRZG4DO.js?v=aa822fbb:53:36 at p5 (http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/.vite/deps/@vaadin_react-components-pro.js?v=aa822fbb:246:24) at div at DashboardView (http://localhost:8183/VAADIN/views/dashboard/@index.tsx?t=1743069208997:42:17) at RenderedRoute (http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/.vite/deps/chunk-L5RWN7JJ.js?v=aa822fbb:5371:26) at RenderedRoute (http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/.vite/deps/chunk-L5RWN7JJ.js?v=aa822fbb:5371:26) at Outlet (http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/.vite/deps/chunk-L5RWN7JJ.js?v=aa822fbb:6035:26) at Suspense at vaadin-app-layout at http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/.vite/deps/chunk-6VRZG4DO.js?v=aa822fbb:53:36 at MainLayout (http://localhost:8183/VAADIN/views/@layout.tsx:74:17) at RenderedRoute (http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/.vite/deps/chunk-L5RWN7JJ.js?v=aa822fbb:5371:26) at RenderErrorBoundary (http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/.vite/deps/chunk-L5RWN7JJ.js?v=aa822fbb:5330:5) at DataRoutes (http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/.vite/deps/chunk-L5RWN7JJ.js?v=aa822fbb:5959:3) at Router (http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/.vite/deps/chunk-L5RWN7JJ.js?v=aa822fbb:6044:13) at RouterProvider (http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/.vite/deps/chunk-L5RWN7JJ.js?v=aa822fbb:5789:3) at I18nextProvider (http://localhost:8183/VAADIN/@fs/home/[...]/node_modules/.vite/deps/react-i18next.js?v=aa822fbb:781:3) at App (http://localhost:8183/VAADIN/index.tsx?t=1743069208997:44:17)

Expected outcome

Error should not occur.

Minimal reproducible example

You can use your example from the docs: https://vaadin.com/docs/latest/components/dashboard#internationalization

Steps to reproduce

Show an example Dashboard with its i18n property set in the docs: https://vaadin.com/docs/latest/components/dashboard#internationalization

Environment

Vaadin version(s): 24.7.0 Hilla React
OS: Linux

Browsers

Chrome, Issue is not browser related

[sissbruecker]

Can confirm the issue, most likely a regression from either:

• feat: support partial i18n in dashboard #8660
• fix: provide i18n property declaration #8816

Doesn't seem to affect all React components though, looks like the issue is that Dashboard calls its widget renderer function as part of updating I18N, which seems to trigger another state update in React.

As a workaround, assigning the I18n object through a ref seems to work:

const ref = useRef<DashboardElement>(null)

useEffect(() => {
  ref.current!.i18n = myI18n;
}, [])

<Dashboard ref={ref}>...</Dashboard>