Is it possible to set a type that doesn't invoke the render() method in React-Native? mobx state tree

Question

I'm in the process of familiarizing myself with React right now. I chose mobx-state-tree for state management.

Since I used the MVP pattern in my Android projects, I would apply the same principle to mobx-state-tree.

How I currently implemented, it works.

However, I would like to define the ScreenView implementation in the model.

Is there a way to define a model type that does not trigger a render () event?

My desired result:

const AuthScreenModel = types
    .model('AuthStore', {
        screen: types.enumeration('Screen', ['auth', 'verification', 'name']),
        screenView: types.norefresh(ScreenViewInterface),
        phoneModel: types.optional(PhoneModel, {})
    })

My current Workaround:

const AuthScreenModel = types
    .model('AuthStore', {
        screen: types.enumeration('Screen', ['auth', 'verification', 'name']),
        phoneModel: types.optional(PhoneModel, {})
    })
    .views((self: any) => {
        self.screenView = null
        return {
            getScreenIndex(): number {
                if (self.screen === 'verification')
                    return 1
                if (self.screen === 'name')
                    return 2
                return 0
            }
        }
    })
    .actions((self: any) => {
        return {
            setScreen(screen: string) {
                self.screen = screen
            },
            setScreenIndex(screenIndex: number) {
                self.screenIndex = screenIndex
            },
            setScreenView(screenView: AuthScreenView) {
                self.screenView = screenView
            },
            swipeNext() {
                if (self.screenView) {
                    self.screenView.scrollBy(self.getScreenIndex() < 2 ? 1 : 0)
                }
            },
            swipePrev() {
                if (self.screenView) {
                    self.screenView.scrollBy(self.getScreenIndex() > 0 ? -1 : 0)
                }
            }
        }
    })
const AuthScreenStore = AuthScreenModel.create({
    screen: 'auth',
    phoneModel: PhoneModel.create({
        country: CountryModel.create({}),
        phoneNumber: ''
    })
})

Answer 1

Using this method's of react life cycle you can choose to call render or not.

For Example, you can use shouldComponentUpdate(); to listening for updates, and return a false when you don't want to render the new view.