Closed srgvrnv closed 3 years ago
Hi @srgvrnv - thanks for this report. Do you mind quickly setting up a demo repo that we can reproduce this and track down the issue?
Hi! Sure, here it is
@isaachinman Hello! Any updates on this issue?
@srgvrnv I don't really know what you expect, you're rendering 1100 components in a loop.
@isaachinman
Size of loop is ridiculously huge just to demonstrate a problem. I face this issue while rendering nested set of 50 entities with nesting level of 2 using of useTranslation()
hook inside each of them.
Anyway react-i18next have no issue to render "1100 components in a loop" while next-i18next have some problems with it
Maybe there is some misunderstanding but I expect it to work same way
Am I missing something here?
I'm having the same issue. @srgvrnv were you able to understand what the issue was?
Best,
@ricardobrandao Unfortunately not. For now I solve it with using static class which I setup in _app.tsx
instead of using useTranslation()
LocaleHandler.locale = language;
LocaleHandler.t = t;
The example repository posted above clearly demonstrates that next-i18n
results in 1 extra render per language change than react-i18n
does. Each full re-render using the react variant causes 1,100 renders -- one each. The next variant causes each component to render twice, 2,200 renders total.
This seems to be caused by the entire App tree being re-rendered instead of just the components that change. You'll notice that in the example above, the core app component in the CRA version never renders again after the first render, while in the next version the App renders every single time and then re-renders all of the children once more as well (needlessly double rendering all of them).
This can be very easily observed by simply adding log statements to the render methods: Here you can see all of the components render with the new language after the change, and then the app itself re-renders causing them all to render once more. My guess is something to do with putting the language in the url...
Anyway, I hope this additional information helps. This ticket should be re-opened as there is clearly either an undocumented inconsistency or an actual bug.
Don't have a lot of spare time at the moment, but very happy to hear any suggestions/ideas.
Is it possible to use react-i18n
instead of this package?
@SalahAdDin Of course.
@isaachinman It just occupy to change the language, as we are using in a plain react website we are working too.
But there is a problem:
I'm getting the language by const lng = () => localStorage.getItem("language") || "en"
.
But when i try in this way i get:
TypeError: Cannot read property 'use' of undefined
, also localStorage
is not defined.
Why?
I found out whenever the language is changed, the router would be replaced which is causing the extra rerendering (source code). Probably this is the expected behavior, since next.js also handles the routing part but create-react-app
doesn't?
@srgvrnv you said you fixed this issue by setting static values, but are you still using appWithTranslation
to wrap your App? Also thanks for your repo which is very helpful to debug
I have the same issue and whydidyourender library point it out very well. it seems like the "t" function exported from "useTranslation" hook has not been memoized.
Same issue pointed by whydidyourender, when you use the hook across your app and realize most re-render are caused by the useTranslation
hook, ouch 😬
Does anyone mind testing this issue in next-i18next@8.0.0
to see if it is still relevant?
I don't know why but I got the same issue with react-i18next. LOL
@isaachinman upgrading to v8.0.0 from v6 is really painful. would there be any patch for the v6 to fix this issue?
@k4mr4n As with all previous releases, I won't be actively working on maintenance, but if users want to open PRs, I will certainly review, merge, and publish them.
For anyone interested, re-render is still happening to me (probably should at some point), but I ended up using next-translate
and it seems to be working fine.
@andrei-scripcaru why did you switched to next-translate
?
@andrei-scripcaru why did you switched to
next-translate
?
Switching the language was causing children (not sure exactly which ones) to re-render and there's no re-rendering with next-translate
. I believe it has to do something with getStaticProps
since if commented it works as expected.
@andrei-scripcaru why did you switched to
next-translate
?Switching the language was causing children (not sure exactly which ones) to re-render and there's no re-rendering with
next-translate
. I believe it has to do something withgetStaticProps
since if commented it works as expected.
@isaachinman
@SalahAdDin What was the intention of the @?
If anyone can provide reproducible examples of faulty behaviour, issues will be fixed quickly.
any solution ?
Create a file Translate.js import { useTranslation } from "react-i18next";
function Translate(props) { const { t } = useTranslation(); return t(props.value); } export default Translate;
then add this function in the component
Thats solution fix the problem of rerendering the component.
There is this effect in source code causing useTranslation to refresh the "t" function (i'm using suspense)
var isInitial = useRef(true);
useEffect(function () {
if (isMounted.current && !isInitial.current) {
setT(getT);
}
isInitial.current = false;
}, [i18n]);
Guys ... could it be your bug ??? (this was my one) https://stackoverflow.com/questions/61254372/my-react-component-is-rendering-twice-because-of-strict-mode
Try disabling React.StrictMode !!!! ;)
@Poyoman39 That is not next-i18next
code.
I know this is a pretty old thread, but I've found that useTranslation
causes a double render when the component is used within React Router.
з "react-i18ne
Only i18n - and we have 2 renders. Why?
https://codesandbox.io/s/i18next-10-rerender-not-fixed-4eydfm?file=/src/App.js
The problem persists:
https://codesandbox.io/s/heuristic-agnesi-9t91nh
I now React's StrictMode will cause a double render, but if we divide the Children's render by 2, we'll still have a render.
without strict mode i see only 1 render:
Describe the bug
When I use useTranslation hook inside function component it causes multiple rerenders. Can't reproduce it with create-react-app and react-i18next. So it should be landed here. If I use react profiler I see that it takes 1102 render, but with create-react-app and react-i18next it takes only 2. Am I missing something or this is a bug?
Occurs in next-i18next version
4.2.1
Steps to reproduce
Expected behaviour
Shouldn't be rendered so much times
OS (please complete the following information)