Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Ask HN: How do you manage state in your React application?

news.ycombinator.com

Post reply on HN
Print view View original

31–40 of 47 posts

Re: Ask HN: How do you manage state in your React application?

#31

Post by oliverx0 »

kecupochrenx wrote: post #29
tomduncalf wrote: post #10

Been using MobX for about three years and I think it is wonderful. Incredibly easy to use (mark your variable as observable, modify it like you would any normal variable, and any components which use those variables in their rendering and are marked as observers automatically update), very performant out of the box (only components affected by a change re-render so no shouldComponentUpdate needed) and some excellent…

Try mobx-state-tree. It's basically MobX with Redux-like tree structure written by the guy who did MobX. It combines best of both worlds. We use it at work and it's just such pleasure to work with, highly recommend

I second this. I am surprised it is not more popular.

Re: Ask HN: How do you manage state in your React application?

#32

Post by acemarke »

vosper wrote: post #30

At my current job we use Redux, though I wouldn't choose it myself (it had been adopted already when I joined). I think Redux is best suited to very large and complex applications, with very disciplined and skilled engineering teams, who talk to each other, refactor code, and have the time to think through things like the correct arrangement of application state, providing reusable selectors. Those teams, of course,…

FWIW, we recently added a new "action stack trace" feature to the Redux DevTools Extension that helps show exactly where each action was dispatched from [0].

Also, I agree that sagas are not necessary for most apps, and we have some advice in the Redux FAQ on how to choose a side effects handling approach [1]. For most apps, thunks are more than sufficient.

[0] https://github.com/zalmoxisus/redux-devtools-extension/blob/...

[1] https://redux.js.org/faq/actions#what-async-middleware-shoul...

Re: Ask HN: How do you manage state in your React application?

#33

Post by yayr »

kecupochrenx wrote: post #29
tomduncalf wrote: post #10

Been using MobX for about three years and I think it is wonderful. Incredibly easy to use (mark your variable as observable, modify it like you would any normal variable, and any components which use those variables in their rendering and are marked as observers automatically update), very performant out of the box (only components affected by a change re-render so no shouldComponentUpdate needed) and some excellent…

Try mobx-state-tree. It's basically MobX with Redux-like tree structure written by the guy who did MobX. It combines best of both worlds. We use it at work and it's just such pleasure to work with, highly recommend

It is indeen wonderfully easy to work with. However, it has some performance penalties. I found typescript in conjunction with pure MobX just as efficient.

Especially complex state de-/serialization is a breeze with serializr.

Re: Ask HN: How do you manage state in your React application?

#34

Post by rjdlee »

tomduncalf wrote: post #10

Been using MobX for about three years and I think it is wonderful. Incredibly easy to use (mark your variable as observable, modify it like you would any normal variable, and any components which use those variables in their rendering and are marked as observers automatically update), very performant out of the box (only components affected by a change re-render so no shouldComponentUpdate needed) and some excellent…

I have a few months of experience working with MobX and have read a lot of the community material. Since it's so flexible, there's a lot of different patterns you can do with MobX. I haven't been able to set on one, any suggestions?

Re: Ask HN: How do you manage state in your React application?

#35

Post by tomduncalf »

yayr wrote: post #33
kecupochrenx wrote: post #29

Earlier quoted context omitted.

Try mobx-state-tree. It's basically MobX with Redux-like tree structure written by the guy who did MobX. It combines best of both worlds. We use it at work and it's just such pleasure to work with, highly recommend

It is indeen wonderfully easy to work with. However, it has some performance penalties. I found typescript in conjunction with pure MobX just as efficient. Especially complex state de-/serialization is a breeze with serializr.

Yeah exactly, for my use case (mobile device, frequent state updates) I couldn’t justify the overhead of state-tree after doing some profiling. Shame as it looks great and would have been a good fit ofberwise.

Thanks for the pointer to serializr - I hadn’t seen that before!

Re: Ask HN: How do you manage state in your React application?

#36

Post by woah »

The concept of having one store with associated actions is a great one, but Redux itself has an enormous amount of boilerplate having to do with the fact that you do all calls into your state functions as events which is completely unnecessary. Every project I’ve worked on using redux ends up having a ton of different abstractions just to reduce the redux event boilerplate overhead. I use unstated https://github.com/jamiebuilds/unstated , which gives you the beneficial central store structure without the silly event concept.

Re: Ask HN: How do you manage state in your React application?

#37

Post by tomwilson »

enlyth wrote: post #4

We use Redux at work for larger projects, React setState/Context for smaller ones, and I'm personally a huge fan of mobx-state-tree which I think is the best solution, and can be plugged into Redux if needed. I think Redux should not be used for everything (there are libraries like Redux-Form which I think are an anti-pattern as ephemeral state like that should never go through the root reducer on every key change)

I hate redux-form so. much.

Re: Ask HN: How do you manage state in your React application?

#38

Post by arenaninja »

acemarke wrote: post #24
arenaninja wrote: post #20

Using redux v4 with react-redux v5 for a large and complicated project. Was looking into react-redux v6 but it looks like there may be a significant performance hit ( https://github.com/reduxjs/react-redux/issues/1164 ) so will hold off on it now. react-apollo is very interesting to me, but my understanding is that we'd need a graphql compatible backend, which we don't have

Hi, I'm a Redux maintainer. I wouldn't call it a _significant_ performance hit. There's a measurable difference in our artificial stress tests benchmarks, and some users have reported slowdowns in specific scenarios (especially when large forms are connected to Redux). I recently posted a roadmap issue with our plans for addressing the perf issues, and moving towards the ability to ship a hooks-based API for React-Re…

I'm not sure how you guys qualify "large" forms, but our application is pretty much all inputs (dynamically generated somewhere between 25 and ~300 visible on screen at one time)

We're also investigating hooks, we think we'd get some benefits from not having so many HOCs... specifically as our application is a _large_ form, unmounting components can sometimes be very expensive for us (common example: switching between two React tabs). Excited to see when you guys can release this change since it IS breaking, hopefully a major version change will suffice here :)

Re: Ask HN: How do you manage state in your React application?

#39

Post by acemarke »

arenaninja wrote: post #38
acemarke wrote: post #24

Earlier quoted context omitted.

Hi, I'm a Redux maintainer. I wouldn't call it a _significant_ performance hit. There's a measurable difference in our artificial stress tests benchmarks, and some users have reported slowdowns in specific scenarios (especially when large forms are connected to Redux). I recently posted a roadmap issue with our plans for addressing the perf issues, and moving towards the ability to ship a hooks-based API for React-Re…

I'm not sure how you guys qualify "large" forms, but our application is pretty much all inputs (dynamically generated somewhere between 25 and ~300 visible on screen at one time) We're also investigating hooks, we think we'd get some benefits from not having so many HOCs... specifically as our application is a _large_ form, unmounting components can sometimes be very expensive for us (common example: switching betwee…

If you've got any public examples of apps that are showing perf issues (especially with React-Redux v6), please let me know. Ditto if you can come up with a smaller repo or CodeSandbox that demonstrates the issues.

Our artificial stress test benchmarks are better than nothing, but I really want to get some more "real-world"-type scenarios put together that we can use to compare behavior.

Re: Ask HN: How do you manage state in your React application?

#40

Post by tomduncalf »

rjdlee wrote: post #34
tomduncalf wrote: post #10

Been using MobX for about three years and I think it is wonderful. Incredibly easy to use (mark your variable as observable, modify it like you would any normal variable, and any components which use those variables in their rendering and are marked as observers automatically update), very performant out of the box (only components affected by a change re-render so no shouldComponentUpdate needed) and some excellent…

I have a few months of experience working with MobX and have read a lot of the community material. Since it's so flexible, there's a lot of different patterns you can do with MobX. I haven't been able to set on one, any suggestions?

The pattern I use is to create classes for stores, each store having a small, fairly well defined scope e.g. AuthenticationStore. These stores contain the observable variables, computed variables and action methods (I use strict mode) for working with the data. I allow the action methods to do other stuff like make HTTP calls etc too, I find life much easier that way rather than all the side-effects middleware hassle with Redux :)

I then use the “root store” pattern from the MobX docs (https://mobx.js.org/best/store.html) - I have a stores/index.ts file which contains a class containing instances of all the other top level stores. I can then instantiate the root store and access it either through Provider or as a singleton. Each store can have the instance of the root Store passed in to the constructor for cross-store communication, which can be convenient although I think other patterns such as callbacks are probably more architecturally sound.

Post reply on HN