MobX conditional updating without shouldComponentUpdate

Question

So my case is very similar to Slack chats.

I have a domain store with chats and when I open some chat with unread messages I'd like to have some separator between read and unread (new) messages.

Also at the moment I open a chat I send a request to mark all unread messages of this chat as read.

So my problem is: after getting a response from the server all my messages become read in my domain store. But in my messages component they should still be displayed as unread (below the "new messages separator") until user performs some specific actions.

So if it was just React I could use shouldComponentUpdate to just ignore changing of isUnread prop.

Previously I had local observable copy of messages in this component which I just initialized in constructor and then updated in componentWillReceiveProps (ignoring mentioned prop changes). Now this lifecycle is deprecated and all this approach seems like an anti-pattern anyway. Even MobX says not to copy observables in such way.

Same thing about reactions. They should be used for side effects and not for copying observed data to another observables.

Thus I can't figure out any correct approach for this.

Answer 1

You can use reaction to change the observable state, from a technical standpoint it is perfectly valid, and it will work as expected, but the creator of Mobx considers it an antipattern, in a sense that there are better ways to structure your code (he recommends using computed properties instead). So if using reaction helps you with your problem, use it.

More info on this github issue: Question: Can I rely on reaction execution order?

Having said that, maybe you should change the structure of the message object, and add another property UISeen that marks only if the message has been seen in the ui and write and read that property when showing messages.