React 18+ in StrictMode: _buildState is not triggered on state change

I have just made a simple project to learn RESUB with React + Typescript.

Store

@AutoSubscribeStore
class PermissionsStore extends StoreBase {

    private _permissions: string[] = [];

    updatePermissions(permissions: string) {
        this._permissions = this._permissions.concat(permissions);
        this.trigger();
    }


    @autoSubscribe
    getPermissions() {
        return this._permissions;
    }

}

export default new PermissionsStore();

Component

interface AppState {
    permissions: string[],
}

export default class PermissionsComponent extends ComponentBase<any, AppState> {



    getPermissions = async () => {
        PermissionsStore.updatePermissions("loading")
    }

    render() {
        return <React.Fragment>
            {this.state.permissions?.length ? <h4>Loading</h4> : <h4>Not Loading</h4>}
            <button onClick={this.getPermissions}>get Permissons</button>
        </React.Fragment>;
    }

    protected _buildState(props: {}, initialBuild: boolean, incomingState: Readonly<AppState> | undefined): Partial<AppState> | undefined {
        console.log('in build State')
        return {permissions: PermissionsStore.getPermissions()}
    }
}

[berickson1]

I checked out the example here. React 18 actually works with ReSub, the issue here is <React.StrictMode>. StrictMode re-runs lifecycle methods to ensure that there’s no side-effects, but ReSub relies on call ordering atm. I expect that this could be fixed, but I think there’s a clear path here to unblock yourself by removing the <React.StrictMode> wrapper on the app

[mikehardy]

Ah ha!

Thanks for this I tried with react 17 and its working fine. This issue is appearing with react 18.

Thanks for testing that hunch. Okay, react v18 just came out and still is not in wide deployment in my usage context (react-native - which is still on 0.69.0-rc.0 - just a release candidate - where they move from react 17 to 18). That explains why this is just coming up now.

I suppose it is time to look at the react release notes / related changes and see what broke ReSub. This won’t be a high priority for me unfortunately (see above: not important for my use case) yet but if it sits longer than a few months I’ll probably dig in. Otherwise anyone else with domain skills could trace through to see what happened

@deregtd suggest an edit to the issue and pinning it to say “React v18 issue / works on React v17” for future searchers, maybe adding a “help wanted” 🙏 😆