Freezed browser after big change

[Merynek]

Hello,

I have problem with mobx freeted browser after big change.
I tried it without mobx and it works, so Issue is in mobx observable or observer (mby)

    private bigStore: IStore {
          // some observable properties
          store: {
              // some observable properties
              storeArray: [
                  // some observable stores with obserable properties
              ]
          }
    }
    @action
    private async processMethod(arg1: number, arg2: number) {
        this.bigStore.processBigChange(); // this line change very big and deep store with observable and another stores.
    }

The issue is that i run lot of changes on stores which have lot of observable properties and it stops main thread in browser,
I tried it run in setTimeOut, but I need run it in one transaction (action).
Is it possible to disable mobx reaction, actions and every call in mobx for this code? and after that I turn on again, mby it is not that issue but I tried lot of things but no success :-(.

Version
"mobx": "^5.15.7",
"mobx-react": "^6.3.1"

[mweststrate]

No there is nothing for that. I recommend to pause the runtime in the debugger while it freezes to see if you're in an endless loop, or to run the profiler and check what takes so much time.

…

On Fri, 8 Jan 2021, 18:56 Merynek, ***@***.***> wrote: Hello, I have problem with mobx freeted browser after big change. I tried it without mobx and it works, so Issue is in mobx observable or observer (mby) private bigStore: IStore { // some observable properties store: { // some observable properties storeArray: [ // some observable stores with obserable properties ] } } @action private async processMethod(arg1: number, arg2: number) { this.bigStore.processBigChange(); // this line change very big and deep store with observable and another stores. } The issue is that i run lot of changes on stores which have lot of observable properties and it stops main thread in browser, I tried it run in setTimeOut, but I need run it in one transaction (action). Is it possible to disable mobx reaction, actions and every call in mobx for this code? and after that I turn on again, mby it is not that issue but I tried lot of things but no success :-(. *Version* "mobx": "^5.15.7", "mobx-react": "^6.3.1" — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2705>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBBH3YPOQHCUYGOW3B3SY5INZANCNFSM4V22RZNQ> .

[Merynek]

It freezed only for 20second, it is not endless loop

[Merynek]

I found out that only mobx freeze browser. So much data perhaps. In pure javascript is very fast, its only fill data. But when these data is obserable, it is very slow and freeze main thread.

[danielkcz]

Without some actionable example, we can't really do much. You have to either profile it specifically yourself, might be some reaction that's taking too much time. Or supply runnable example that shows the problem.

[mweststrate]

Ok, the chrome profiler is perfect then to find out where it is spend.

…

On Fri, 8 Jan 2021, 19:19 Merynek, ***@***.***> wrote: It freezed only for 20second, it is not endless loop — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2705 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBAOL2OEMWHESY4INUTSY5LDPANCNFSM4V22RZNQ> .

[Merynek]

i tried, but ok I'try again

[mweststrate]

Also check modifiers like observable.ref / .shallow in case you're making things unnecessarily deeply observable

…

On Sun, 10 Jan 2021, 15:20 Daniel K., ***@***.***> wrote: Without some actionable example, we can't really do much. You have to either profile it specifically yourself, might be some reaction that's taking too much time. Or supply runnable example that shows the problem. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2705 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBF4TQ4XEIYUHOMNMXTSZHASFANCNFSM4V22RZNQ> .

[Merynek]

Here is the example of my issue.
Code and Data doesnt make sense, its only reflect my issue.
Update Boss is very fast, but after that browser freeze.
What I want is show loader before action, but this action freeze animation of loader.
I tried use setTimeout, but I need show new DOM after all updates. (not gradually)
@mweststrate
@FredyC

Stores:

export class Boss {
    @observable public masters: Master[] = [];

    public update(json: IBossJson) {
        json.masters.forEach(m => {
            const found = this.masters.find(d => d.id === m.id);
            if (found) {
                found.update(m);
            } else {
                const newM = new Master();
                newM.update(m);
                this.masters.push(newM)
            }
        })
    }
}

export class Master {
    public id: number;
    @observable public slaves: Slave[] = [];

    public update(json: IMasterJson) {
        json.slaves.forEach((slave, index) => {
            const found = this.slaves.find(s => s.id === slave.id);
            if (found) {
                found.update(slave);
            } else {
                this.insertSlave(slave);
            }
        })
    }

    private insertSlave(json: ISlaveJson) {
        const slave = new Slave();
        slave.update(json);
        this.slaves.push(slave);
    }
}

export class Slave {
    public id: number;
    @observable public slaves: Slave[] = [];
    @observable public text: string = "";

    public update(json: ISlaveJson) {
        json.slaves.forEach(() => {
            const stop = new Slave();
            stop.id = json.id;
            stop.text = new Date().toString();
            this.slaves.push(stop);
        })
    }
}

View:

@observer
export class TestComponent extends React.Component {
    private boss: Boss = new Boss();

    private update() {
        runInAction(() => {
            this.boss.update(getBossJson());
        })

    }
    private renderSlave(slave: Slave) {
        return (
            <div>
                SLAVE: {slave.id}
                <br />
                {slave.text}
                <br />
                {slave.slaves.map((s) => this.renderSlave(s))}
            </div>
        )
    }
    private renderMaster(master: Master) {
        return (
            <div>
                MASTER: {master.id}
                <br />
                {master.slaves.map((s) => this.renderSlave(s))}
            </div>
        )
    }
    render() {
        return (
            <div>
                <div>
                    {this.boss.masters.map((m) => this.renderMaster(m))}
                </div>
                <br />
                <button onClick={() => this.update()}>UPDATE</button>
            </div>
        )
    }
}

Data:

export interface IBossJson {
    masters: IMasterJson[];
}

export interface IMasterJson {
    id: number;
    slaves: ISlaveJson[];
}

export interface ISlaveJson {
    id: number;
    text: string;
    slaves: ISlaveJson[];
}
export function getBossJson(): IBossJson {
    const boss: IBossJson = {
        masters: []
    }
    for (let i = 0; i < 150; i++) {
        const master: IMasterJson = {
            id: i + 1,
            slaves: []
        };
        for (let j = 0; j < 150; j++) {
            master.slaves.push({
                id: j + 1,
                slaves: [],
                text: "text - " + j + 1
            })
        }
        boss.masters.push(master);
    }
    return boss;
}

[danielkcz]

Please make it into a runnable example that clearly shows the performance issue. We don't even know how much data you are processing there and we have no means of generating those. Furthermore, it's not uncommon that you might realize the actual problem when you start setting up a proper reproduction. So if you want help, that's what you have to do.

[Merynek]

Here is example:
Just click on update.
There is debugger before and after long action, and rerendere is freeze the browser.
https://codesandbox.io/s/gracious-tereshkova-jo6qd?file=/src

[mweststrate]

In the example I notice you do twice a lookup by id using a find operation, which makes your update quadratic in performance, I expect the slowness will disappear if you use maps instead where your items are stored by id (or if you do the updates in terms of index). Note that maps do preserve insertion order.

…

On Mon, Jan 11, 2021 at 9:19 AM Merynek ***@***.***> wrote: Here is example: Just click on update. There is debugger before and after long action, and rerendere is freeze the browser. https://codesandbox.io/s/gracious-tereshkova-jo6qd?file=/src — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2705 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBDXNEQXDP4EUK24TCLSZK7CJANCNFSM4V22RZNQ> .

[Merynek]

@mweststrate
Good point, but in this case I never called find(). This example is only for showing browser freeze on big data.
@FredyC
I know that without render is very fast, thats why I open this discusse.
I can show loader while data is rendering but the loader is freezed as well :-(
I´ll try find out something about big data rendering in React, and I´ll let you know :-)

[danielkcz]

But you are calling find in every Boss/Master update function. It doesn't find anything in the case, of course, but with every iteration, the array grows bigger and it has to look through it every time. Try removing that branch of finding and checking for "found" completely. And if you limit rendering to for example to 20 first items you get a pretty fast response given the amount of data it's processing there.

So in the end this isn't really MobX related performance issue. You need to learn how to optimize your code if working with big loads of data.

[Merynek]

Yes, you are right. Find function is called everytime.

@FredyC - "And if you limit rendering to for example to 20 first items you get a pretty fast response given the amount of data it's processing there."
What does it mean? Rendering part by part, using setTimeout ??

[danielkcz]

What does it mean? Rendering part by part, using setTimeout ??

No, I meant mostly for showing the difference that if you render only a small portion of data, it will be much faster. You can indeed use react-virtuoso for a robust solution once you optimize the data mechanics.

[Merynek]

I see. Oukey I´try it. Thank you very much :-)

[mattruby]

I'm assuming something like this might help: https://github.com/petyosi/react-virtuoso

…

On Mon, Jan 11, 2021, 7:52 AM Merynek ***@***.***> wrote: Yes, you are right. Find function is called everytime. @FredyC <https://github.com/FredyC> - "And if you limit rendering to for example to 20 first items you get a pretty fast response given the amount of data it's processing there." What does it mean? Rendering part by part? Using i setTimeout ?? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2705 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABCW4U5TNX4ABM3SRGFFLLSZL7DLANCNFSM4V22RZNQ> .