Prevent other components from unnecessary updates

[DevJett]

I'm wondering about my approach if this how I supposed to prevent the other components from getting an update when it's not necessary.

class ChildThree extends Component {
  state={
    nameThree: 'three',
  }

  componentDidMount() {
    this.dispose = autorun(() => {
        if(store.state.nameThree !== this.state.nameThree){
            this.setState({nameThree: store.state.nameThree});
        }
    });
}
componentWillUnmount() {
    this.dispose();
}

shouldComponentUpdate() {
  return store.state.nameThree !== this.state.nameThree;
} // not using observer from `mobx-react`

Please take a look at Stackblitz below

https://stackblitz.com/edit/react-jimjgz

[mweststrate]

I think you should start with elaborating what you are trying to achieve and why you're not using observer :). Your example doesn't do anything, so I'd say the idiomatic way to achieve the same is class ChildTree extends Component {} ;-).

[DevJett]

Hi Mweststrate, glad you replied! I'm trying to prevent the components from unnecessary updates. As you can see in my example on Codesandbox in the ChildOne component I'm updating a specific state in the store which I'm not using in other components and that action causes the other components to get updated as well. I solved that in the ChildThree component by using shouldComponentUpdate method and instead of using observer I used autorun because I couldn't use shouldComponentUpdate method while the component is wrapped with observer.
I'm just wondering about my approach if this how I should do that.

[mweststrate]

Your sandbox doesn't work for me. But I'd use either observables for your local component state as well to leverage the same optimizations offered by MobX, or use `<Observer>` sections instead of `observer`. Managing your own autorun to optimise render should really not be needed.

…

On Thu, Apr 15, 2021 at 1:11 PM Shrroy ***@***.***> wrote: Hi Mweststrate, glad you replied! I'm trying to prevent the components from unnecessary updates. As you can see in my example on Codesandbox in the ChildOne component I'm updating a specific state in the store which I'm not using in other components and that action causes the other components to get updated as well. I solved that in the ChildThree component by using shouldComponentUpdate method and instead of using observer I used autorunbecause I couldn't useshouldComponentUpdatemethod while the component is wrapped withobserver` — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2896 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBEPFIMUODWRXHM6DMDTI3JXJANCNFSM427KEVCQ> .

[DevJett]

I've tried to use the <Observer> but it keeps updating unnecessary elements

  <Observer>{() =>
        <div>
          {console.log('it will be called whenever the store get updated')}
          Child Three name: <b>{store.state.nameThree} </b> 
        </div> }
      </Observer>

Is it possible to get the above element rendered only when the store.state.nameThree is updated?

I fixed the Codesandbox by using a different editor
https://stackblitz.com/edit/react-jimjgz

[mweststrate]

Please be a bit more explicit in your problem statement; what should be clicked. What do you expect to see, and what do you observe?

As far as I understand your issue: Note that in general React terms, if you want to decouple rendering of the above snippet of the component that contains it, you will have to break it down into separate components. React can't run half a render function. You're passing fresh callback every the owning component parent renders, so the Observer section will re-render as it should. To prevent that, split the component in two and pass down your store.

[DevJett]

Actually, the problem I'm trying to resolve is when the store gets update all the observer components will get to update even though the variable that updated is not used in the other components.

For example, I have my store like this

class AppState {
  nameOne = 'one';
  nameTwo = 'two';
  
  constructor(){makeAutoObservable(this)};
  changeOne =_=> this.nameOne = 'NewOne';
  changeTwo =_=> this.nameTwo = 'NewTwo';
}
const store = new AppState();
export default store;

Then I got two class components like so

class Red extends Component{
    render() { return (<>
        {console.log('Red updated')} 
        <b>{store.nameOne} </b> 
        <button onClick={_=>store.changeOne()}>change one</button>
       </>)}}    
export default observer(Red);

class Blue extends Component{
    render() { return (<>
        {console.log('Blue updated')}
        <b>{store.nameTwo} </b> 
        <button onClick={_=>store.changeTwo()}>change two</button>
       </>)}}    
export default observer(Blue);

The problem in the above approach is when the Red component fires the changeOne function it causes the Blue component to update as well, even though the Blue component doesn't use the nameOne variable.

The expected behavior is just the components that using nameOne variable should be updated

[mweststrate]

Please be a bit more precise in your questioning and provide something reusable / runnable? Please follow the issue template if that helps.