React Navigation with MobX

[chongchungyin]

Hi guys,

I am using MobX for my React Native project. I noticed that if i have multiple screens in one stack, if those screens are observing same observable, it will cause all the screens rerender even if screens are in backstack. Is there anyway we can stop screen observing changes?

[mweststrate]

make the rendering conditional based on whether you are in the backstack?

…

On Tue, Sep 22, 2020 at 4:16 AM chongchungyin ***@***.***> wrote: Hi guys, I am using MobX for my React Native project. I noticed that if i have multiple screens in one stack, if those screens are observing same observable, it will cause all the screens rerender even if screens are in backstack. Is there anyway we can stop screen observing changes? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2456>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBFWFJNRSNC64TMBM6LSHAJKDANCNFSM4RVILYVA> .

[chongchungyin]

i tried using useIsFocused in react navigation to fix this problem. Overall is working fine but this solution is a bit ugly. Wondering is there any cleaner way to unsubscribe the observable.

[urugator]

You can also experiment with conditional untracked

const Cmp = observer(() => {
  const render = () => {}
  if (isForeground) { // ger from props or ctx
    return render()
  } else {
    return untracked(render)
  }
})

Similary you can conditionally wrap the render in <Observer>
Obviously you have to do it for every component.

[chongchungyin]

@urugator nice one. for those having same issue can try this.

import {untracked} from 'mobx';
import {useIsFocused} from '@react-navigation/native';

export default (component) => {
  const screenVisible = useIsFocused();
  if (screenVisible) {
    return component;
  } else {
    return untracked(() => {
      component;
    });
  }
};

@chongchungyin are you satisfied with the solution and can this issue be closed? I've also corrected the code highlighting in your last comment.