infinite loop with dynamically nested components

Hi, I’ve got a browser-crashing scenario with some nested components where translate is called on an inner and outer component. I guess it’s some weird edge-case with context handling.

I’ve tried to dumb it down quite a bit:

OuterComponent renders MiddleComponent and passes an anonymous Component that renders InnerComponent with some extra parameter. OuterComponent and InnerComponent are translated.

I’m sorry that this is still so complex, but I couldn’t get this any more simple.

Is this a bug in react-i18next? Is it something in react itself?

import * as React from 'react';
import {translate, Trans} from 'react-i18next';

const InnerComponent = translate()(
    ({name}: { name: string }) => <Trans>some-test</Trans>
);

const MiddleComponent =  ({Component}: { Component: React.ComponentType }) => <div><Component /></div> ;

const OuterComponent = translate()(
    class extends React.Component<any> {
        render() {
            console.log('this loops like crazy...');
            return (
                <div>
                    <MiddleComponent Component={() => <InnerComponent name="qwe"/>}/>
                </div>
            );
        }
    }
);

[jamuhl]

hm…must be some weird timing issue…but honestly no exact idea why

the cache does add resource bundles and cause of that triggers a few times added - as we listen to added and trigger a rerender upon that this might be to much…?!?

could you try setting bindStore to false?

translate('yourNS', { bindStore: false })(OuterComponent)

[phryneas]

Oh, nice. I was still at 4.7.0 which didn’t have that option. Had not noticed that this was getting so many updates 😃