How to override shouldComponentUpdate or prevent re-render when component invisible

[code-brewer]

Hi, all

What I want to archive is prevent render action when the component is invisible.

So my first thought is to override the shouldComponentUpdate function, as shown in below snippet.

But it failed to work: when store data change, the shouldComponentUpdate not called, and render not invoked either.

@inject('myStore')
@observer
class MyDashboardScreen extends Component {
    constructor(pros){
        super(pros);
    }

    shouldComponentUpdate() {
        const oldRet = super.shouldComponentUpdate ? super.shouldComponentUpdate() : null

        // this.state.isVisible : this state was set by withNavigationFocus HOC provide by reactnavigation
        //  reactnavigation site:  https://reactnavigation.org/docs/3.x/with-navigation-focus/ 

        let fixRet = oldRet && (this.state.isVisible)
        return fixRet
    }
    
  ...
}

Any ideas?

Thanks for your attention~

[urugator]

mobxjs/mobx-react#667 (comment)

[code-brewer]

Thanks for your solution.

Is there example on how to use untracked() in a decorated ES6 style class component ?

@Inject('myStore')
@observer
class MyDashboardScreen extends Component {
render() { // what kind of syntax to use untracked() ???
}
...
}

[mweststrate]

It's the same, just put the code in your render

[urugator]

It's the same, you just have to wrap the rendering logic inside untracked, eg:

class MyDashboardScreen extends Component {
   _render() {
      // original render
   }
   render() {
       return this.state.isVisible 
          ? this._render() 
          : untracked(() => this._render())
   }
}

Keep in mind, it only disables subscriptions for observables accessed directly inside untracked, it won't affect descendant observer components.

[code-brewer]

Very clear example and useful reminds！