Question: Example Application about hookstate

[avkonst]

@yantakus Looks like I understand what you are looking for. I will try to create some 'starter template app'. Do you know an example of it for Redux or Mobx or other lib? I need some inspiration... I can think of TODO list editor...?

[praisethemoon]

Hello there,

I am writing a piano learning application https://moonpiano.praisethemoon.org/ with React and Electron. I have been using redux for handling Piano Keyboard events and damn how slow it was. I have been searching for alternatives to improve performance, and recently I have considered dropping React overall due to poor performance. Hours lost in the Chrome's performance tab trying ro figure out how to improve things, hélas, nothing working.

Just few minutes ago, I came a cross this library, I thought I might give it a try. I had to encapsulate my class components with functional components in order to use the hooks available here.

Results? This library saved my project and my hopes! I am so impressed by the performance gain! I just had to rewire the events to use this library. I still use redux for other stuff, but for frequent events, they working like a charm.

[avkonst]

This is very nice article. I like the performance comparison animation.

BTW, Preact by itself will not give you the performance boost if you have got "rerender due to state update" performance problems. I have compared Preact VS React performance with hookstate: Preact is about 2x times faster than React on the same large table performance demo. However, I am not a fun of preact - to many risks to switch the engine - far easier to minimise rerendering in your app (using Hookstate is one method), which you have control over.

[yantakus]

Hi @avkonst. Great library, impressed with the performance examples!

Still would be very useful to see an example app built with hookstate. Codesanbox is a very good tool for this. I mean it would be great to see an app with multiple components in different places of an app (far away in tree so it is not reasonable to pass state via props) that share the same state values.

I'm considering to try it in my app that is having performance problems, but I don't see an easy and convenient way to share global state. Checked all the examples and any of them describes this use case.

prefer to have global stores not published externally from a module / library

You don't explain the reason behind this suggestion. It would be cool to understand it in detail.

[avkonst]

@praisethemoon checked your video. This is very impressive performance demo. And I guess this is not the limit.

[avkonst]

Available online: https://hookstate-example-app.netlify.com/

[avkonst]

I have added 'Used by' section in the docs: https://github.com/avkonst/hookstate#used-by

@praisethemoon, please let me know if you are happy / unhappy about yours being mentioned.

[avkonst]

Hi @eddielee394 .
Yes, it is used for web app (SPA) and cordova wrapped mobile app - both are managing a lot of data and some of it is real-time watched / changed. I can not name the apps today for legal reasons, but hopefully will be able to name some time soon.

Regarding the design pattern: it is similar recommendations when to use local variable, when to use global variable, when to use module encapsulated variable versus externally published. You can go with one global store, with many global stores, with all being local stores passed as props to children components, or use the mixture of approaches (what I do, depending on a case and my engineering experience)

• prefer local state if it is created and consumed by a component and only it's near (not deeply nested) children
• prefer global state when multiple independent component consume it, i.e. component staying not close in the DOM tree hierarchy
• prefer global state if it can be created or mutated outside of a mounted component, i.e. when a component is not yet (or already not) mounted
• prefer to have global stores not published externally from a module / library
• if a state is published externally (i.e. part of a library interface), publish the wrapped version of it using the transform argument of the create/useStateLink functions.
• prefer multiple global stores for separate independent states (for example, state for user settings, and state for core application data could be separate), it will be easier to refactor/maintain/move things around later.
• if you used to have one global app state with many reduce actions hitting one interface, go with one state, it will be easier to understand for you - you will be always able to split it later with a bit of refactoring. One global - or many split global states will perform equally well - thanks to the usage tracking optimisations done by the Hookstate.

These are the generic guidelines on top of my head I found useful so far.

[avkonst]

The demo application with code samples is a good example of possible application architecture - every individual example uses it's own states, but can share it when many components need to share the state. Just general programming common sense.

Please let me know if the above answers your questions or you would like more information.

[avkonst]

Thanks @praisethemoon . Very nice feedback. I am happy it helped you.
Please consider to help the project to grow by spreading few words about it in blogs, forums, Q&A, etc. Posting your story about replacing slow redux is a nice one to share broadly. Thanks in advance.

[praisethemoon]

@avkonst https://praisethemoon.org/hookstate-how-one-small-react-library-saved-moonpiano/. That's for a start, gonna do the rest whenever I get the chance!

[avkonst]

@praisethemoon FYI: when I attempted to leave a comment on your blog post, I have received the response about invalid capture verification. I have tried the second time and it worked.

[praisethemoon]

Thank you for the feedback about preact! The currently published MoonPiano version works like a charm but the code is a bit messy, I had to rewrite it now and improve performance. Inorder to move to preact I would have to rewrite it a third time 😭

I will take your advice and focus on incrementally improving the performance!

I have got your reply, let's move the discussion there :)

[avkonst]

One way to improve the code is to get rid of class components gradually and move them to functional with hooks. It improved and simplified a lot for me.

[praisethemoon]

So you think it is better to get rid of redux? I don't think it works well with functional components. Right now the way I used Hookstate is by encapsulating components by functional components.

[avkonst]

I do not have redux in my apps and very happy with just hookstate. Hookstate does all what redux supposed to do and does it better and easier for me.

…

On Thu, 7 Nov 2019, 11:45 Soulaymen Chouri, ***@***.***> wrote: So you think it is better to get rid of redux? I don't think it works well with functional components. Right now the way I used Hookstate is by encapsulating components by functional components. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#13?email_source=notifications&email_token=AA6JSVLP762KIWAZELQB4B3QSNCHBA5CNFSM4JJOKLQKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDIIB5A#issuecomment-550535412>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA6JSVJIUGJBWGYB4QDOUCTQSNCHBANCNFSM4JJOKLQA> .

[praisethemoon]

To be honest, hookstate is way easier! The only advantage of Redux (and others probably) that I can think of is that you can trace their updates in developer tools (which I do not use as much my self). I am going to progressively converge to 100% hookstate. This new performance gain really refreshed my motivation 😁

[avkonst]

There are 2 ways to trace updates with Hookstate: 1) attach Logger plugin and 2) use React developers tools and click "Highlight updates". The combination of these was sufficient for me so far. How would you like to see it done better?

[praisethemoon]

Oh wait I didn't know of the logger plugin! Thanks for pointing that out! Since I am using Electron, the react-dev-tools that is running with my app does not have the highlight updates features (it was removed recently I think). In any case, I will give it a try and share my feedback!

[avkonst]

As far as I know electron uses same Dev tools as Chrome. And they added highlight updates back recently.

[praisethemoon]

Good to hear that! Yes electron actually loads chrome's extensions from disk, so I just gotta update react-dev extention and hope for the best 😁

[avkonst]

@praisethemoon hint for you: you can use Hookstate in your class components with help of StateFragment. Something like this (pseudo code):

class MyComponent extends React.Component {
    var store = createStateLink('initial state') // this is locally created state, but the same will work with global state

    // also, you would need to call store.destroy() on component unmount, which is essential for some plugins. There are no plugins here, so no destruction is needed.

    render() {
        return <StateFragment state={this.store}>{storeLink =>
             <input value={storeLink.value} onChange={e => storeLink.set(e.target.value)}/>
        }</StateFragment>
    }
}

Let me know if it works. I believe it should.

[avkonst]

The reason for "prefer to have global stores not published externally from a module / library" - if a store is not used outside of components within a module, do not make the store accessible to other modules. I guess I try to say - apply the same common sense principles if a store was just a plain variable of some other type (let's say a string)

[eddielee394]

I agree with @yantakus regarding global state usage. For example, if we were dealing with a redux app we'd pass our store onto a provider HOC component, which then allows us to access the different parts of the store within our components using the useSelector() hook.
If we need to deal with side effects that may update global state (like an api request), we'd use useDispatch() in whatever component needs to dispatch that action, then the action calls the reducer, state gets updated, etc.
The challenge for me is how do we translate that state management paradigm when using hookstate, because I'd really like to get away from using redux and all of the issues that come with it's implementation.

[eddielee394]

Do you know an example of it for Redux or Mobx or other lib?

Redux:
https://github.com/atulmy/crate
https://github.com/flexdinesh/react-redux-boilerplate/
https://github.com/hidjou/classsed-redux-hooks

Mobx:
https://github.com/mobxjs/awesome-mobx/blob/master/README.md#example-projects
https://github.com/mobxjs/mobx-react-boilerplate

@avkonst

[praisethemoon]

@avkonst make sure to check my updated post, I have added a video demonstrating the new performance!

[yantakus]

@avkonst Yes I agree TODO list would be a great example of an app built with hookstate.

[avkonst]

@praisethemoon , @yantakus , @eddielee394 Could you please review the sample application and suggest improvements? or advise if the example application with Hookstate is sufficient to close this issue?

[yantakus]

@avkonst Thanks for the example app. Well done! This is exactly what I needed. Now I see how it can be implemented in my existing app without rewriting it completely. I just have to rewrite one file that creates app state and exports it.

[eddielee394]

@avkonst This makes perfect sense now. Thanks for taking the time to put together that example app.

[avkonst]

I have added the section 'Quick Start', which refers to the example app now: https://github.com/avkonst/hookstate#quick-start

[praisethemoon]

Looks very good to me! Thanks for sharing it :) Looking forward to see this library grow!