Compare with redux performance

[avkonst]

https://codesandbox.io/s/large-redux-form-perf-example-inmlv

[dai-shi]

Or, would you consider trying https://github.com/krausest/js-framework-benchmark?
I was interested in doing it but haven't had time. (I mean my focus is not benchmark lately.)

[avkonst]

This performance demo equivalent was written by Mark, redux maintainer. I am going to measure how fast it is and compare with the same demo for hookstate. I could create the performance benchmark implementation for hookstate by cloning existing one for react-mobx if there is one. I can not find one. Do you know where react mobx implementation of the benchmark source code is located?

…

On Thu, 21 Nov 2019, 17:47 Daishi Kato, ***@***.***> wrote: Or, would you consider trying https://github.com/krausest/js-framework-benchmark? I was interested in doing it but haven't had time. (I mean my focus is not benchmark lately.) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#14?email_source=notifications&email_token=AA6JSVLEVRCXX6QBGJLLN4LQUYHHVA5CNFSM4JP4O7NKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEY6MII#issuecomment-556918305>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA6JSVLDWYPWNI365HHLB4DQUYHHVANCNFSM4JP4O7NA> .

[dai-shi]

https://github.com/krausest/js-framework-benchmark/tree/master/frameworks/keyed/react-mobX
This is only the one I know.

[avkonst]

Preliminary results. Partial update test shows strange results. hookstate rerenders only every 10th row, but 2 others rerender the whole table and still faster. Not sure why it is not that fast.

[avkonst]

select row test is OK, but still strange. Hookstate rerenders only 2 rows - one unselected and one selected. Other 2 frameworks rerender the whole table. Hookstate should be significantly faster here as it is faster in swap rows. Is it not representative scenario?

[avkonst]

Some results.

FYI @dai-shi

Hookstate is many times faster than competitors on per field update performance (eg. set a field value of large form). Eg. 20x times faster for 1000 fields list. It is about the same when the whole data set is updated. Note: hookstate benchmark is implemented without React.memo. Partial update (10% of the data set is updated) is updated as the whole, but rerenders every field individually, which requires 100 dom changes by React (other frameworks rerender the whole data set at once).

About the same load performance.

A bit better on RAM.

[avkonst]

FYI @ppwfx @praisethemoon

[avkonst]

@praisethemoon, look at the swap rows benchmark - this is similar to your app use case where an individual element in a large dataset is updated frequently.

[dai-shi]

swap rows

Looks very nice. Is it because each row subscribes to the store?

[avkonst]

Any individual row update will be many times faster. Swap is an example of it. It uses scoped state technique (see docs about scoped state). We can tell that each row subscribes to the store, but it is not quite like this. On update there is NO loop through all rows to find out which row to update. Instead affected rows are effectively identified by indexes within hookstate links. These indexes are automatically built when you use the state and place scoped state hooks. This will scale really well over thousands of rows and may be even more.

[dai-shi]

I think I understand the basics if it hasn't changed drastically since before. My question is if it's 20x faster than react-redux, is it faster than vanillajs-keyed? That sounds unlikely.
https://krausest.github.io/js-framework-benchmark/current.html

[avkonst]

React+Hookstate is a bit faster than Preact+Hookstate.

But Preact + Hookstate loads faster:

[avkonst]

@dai-shi this is how it compares against vanilla react and vanillajs. It is faster than vanillajs a bit!!!

[dai-shi]

It looks way too fast to me. But, I'd admit I didn't read either of benchmark code, so I might be wrong.