question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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()}
    }
}

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
berickson1commented, May 6, 2022

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

2reactions
mikehardycommented, May 6, 2022

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” 🙏 😆

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bug: React 18 Strict mode does not simulate unsetting and re ...
This feature simulates user behavior such as a user tabbing away from a screen and back, ensuring that code will properly handle state...
Read more >
Strict Mode - React
StrictMode is a tool for highlighting potential problems in an application. Like Fragment , StrictMode does not render any visible UI.
Read more >
Does strict mode work differently with React 18?
When Strict Mode is enabled, React intentionally double-invokes effects (mount -> unmount -> mount) for newly mounted components.
Read more >
Using strict mode in React 18: A guide to its new behaviors
In this article, you'll learn about Strict Mode, its various features, and how the v18 release has improved its API.
Read more >
React on Twitter: "If your app doesn't work after upgrading to ...
Strict Mode has gotten stricter in 18, but you can turn it off and address issues at ... I did have StrictMode on,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found