All translations disappear after any component change its state (preact X)

Hello, I have problems with the latest version of preact:

        "preact": "^10.0.4",
        "preact-i18n": "^2.0.0-preactx.2",
        "preact-router": "^3.1.0",

App.tsx

            // @ts-ignore
            <IntlProvider definition={definition}>
                <Router>
                    <Login path="/login"/>
                    <RedirectToLogin path="/"/>
                    <CommonLayout default/>
                </Router>
            </IntlProvider>
        );

Dom event inside login component:

    onFocusInput(name) {
        const {fieldsMarkedAsInvalid} = this.state;
        fieldsMarkedAsInvalid[name] = false;
        this.setState({fieldsMarkedAsInvalid});
    }

After state is updated, all translations disappear. The same thing occures in any component. Downgrade helped me.

[pl12133]

I’ve managed to reproduce this now, it seems that loading the dictionary asynchronously causes an issue. When the IntlProvider has props of definition={undefined} on it’s first render, the stale value will eventually overwrite the new value after a child component calls setState.

Reproduction: https://jsfiddle.net/k8e3fm0n/

Workaround: Add a key={definition} prop to your IntlProvider.

Internally, the child component ends up with a condition of component.context !== component._globalContext which may imply an issue in the diff algorithm for Preact but I’m still investigating.

I’m not sure if there is anything to be done here so I’ll follow up in either preactjs/preact or synacor/preact-context-provider.

[pl12133]

Fixed by a451350 and released in 2.1.1-preactx.

Reproduction fixed: https://jsfiddle.net/xyL04bzm/1/