Passing custom React.memo comparison function to observer?

[ondrej-merkun-ms]

React.memo only performs shallow comparison, so a component that uses React.memo will always rerender given the same array. That's why the (optional) second parameter of React.memo is a custom comparison function inside of which you can perform deep comparison.

As you might know, React.memo cannot be used inside an observer, as you will get an error saying that observer already uses React.memo. However, what if I need to provide a custom deep comparison function? Observer doesn't accept a second argument, so how (if at all) can I do that?

Thanks in advance.

[mweststrate]

The whole point of MobX is to avoid needing to do deep comparisons. Why would you need those?

[ondrej-merkun-ms]

I have some logic in my React components/hooks that gives me some arrays of outputs based on various inputs. Since it has nothing to do with my MobX store, I thought I wouldn't put that logic (and those arrays) in there.

I might have to do it in order to get rid of these various issues with components rerendering when they shouldn't, though.

[mweststrate]

I'd look into splitting things up in to smaller components, and / or making sure that the data that isn't managed by MobX is treated as immutable

…

On Mon, Feb 22, 2021 at 4:59 PM Ondřej Merkun ***@***.***> wrote: I have some logic in my React components/hooks that gives me some arrays of outputs based on various inputs. Since it has nothing to do with my MobX store, I thought I wouldn't put that logic (and those arrays) in there. I might have to do it in order to get rid of these various issues with components rerendering when they shouldn't, though. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2823 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBHOHCCOSWXNCTH6EL3TAKEN5ANCNFSM4YAXBVZQ> .

[ondrej-merkun-ms]

Yeah I'll give that a thought, just wanted to know if it's somehow possible to use a custom comparison function with the observer.

Thanks

[danielkcz]

@ondrej-merkun-ms Technically, you can replace observer with <Observer> and then you can stick your own React.memo there. Not really pretty though, I would also look at info splitting to avoid complexity.