ui flashes due to excessive context updates

[MortenHofft]

The intl provider updates the messages on all interactions that require url updates like pushing a search param
Leading to an extreme amount of requests and rerenders
Translations are reloaded constantly and requires everything to refresh.

[MortenHofft]

@danielvdm2000 I looked briefly. It is related to the concept of using loaders on the routes. The applyI18nPlugin is loading 200kb of data on any url state change. And reloads the entire app.
We need to address this before proceeding. It is a cause of other bugs I suspect and it makes it impossible to evaluate performance of other parts of the site.

[MortenHofft]

Looks like a feature/issue with that library. It force rerenders of everything on every url change. https://github.com/remix-run/react-router/discussions/9851 . That might be appropriate for some projects, but definitely not for ours.

Option to consider:

• Perhaps the shouldRevalidate option can help. But there is practically no documentation https://reactrouter.com/en/main/route/should-revalidate
• Cache all loaded data and use that instance when possible. That might help. But seem an awkward hack fix
• Stop using that lib or at least stop using the data router with loaders.

This issue makes me a bit nervous about that library. Fixing it with the first 2 options ties more and more code to a very specific router implementation. One that even seem to be a somewhat awkward fit for us.

quote: One of the only constants I've had in my entire programming career is that React Router is going to rewrite their API on every new release. So it goes.

Sounds like the coming v7 is yet another big change https://remix.run/blog/merging-remix-and-react-router

[MortenHofft]

Found a comment in a closed issue with more info on usage of shouldrevalidate
https://github.com/remix-run/react-router/issues/12116#issuecomment-2407431683

shouldRevalidate({ currentUrl, nextUrl, defaultShouldRevalidate }) {
  if (currentUrl.toString() === nextUrl.toString()) {
    return false;
  }
  return defaultShouldRevalidate;
},

[MortenHofft]

shouldRevalidate works. But I'm not super comfortable having this logic in the router. Especially in a library that is known for its volatile API. I would prefer is the router was a minimal implementation that only dealt with routing.

That said it looks like it can solve our performance issue for now. The menu and translations files aren't reloading on every interaction now