MobX observables change do not always trigger observer components render

Question

My project is built on React, and for state management Mobx is being used. We are not using the decorators, so the components that need to observe the observables, need to be wrapped in the following way:

import React from 'react';
import {observer} from 'mobx-react';
import MyComponent from '../app/my-component.jsx';
import myFilter from './my-filters.jsx';

export default observer(() => {
  return <MyComponent filter={myFilter}/>;
});

The component MyComponent is receiving the observables as props:

static propTypes() {
    return {
      myFilter: React.PropTypes.function.isRequired
    };
  }

And it is used in the render method:

render() {
  if (this.props.myFilter.filterValue1 !== null) {
    // some code here
  }
}

myFilter in this case is the observable, which looks somehow like this:

import {observable} from 'mobx';

const myFilter = observable({
  filterValue1: null,
  filterValue2: null,
  addOrRemoveItem() {
    // some function here
  }
});

export default myFilter;

In this case, if some component alters myFilter, the observer MyComponent which receives the observable as props, does not always re-render. In some cases this can be solved by addressing the observable object by attribute before the call of the component. E.g.:

export default observer(() => {
  console.log(myFilter.filterValue1);
  return <MyComponent filter={myFilter}/>;
});

But this is not stable. Is there a valid workaround to avoid this?

gius gius · Accepted Answer · 2017-06-11T10:23:20

Alik is right, you need MyComponent to be an observer as well.

Otherwise, your code <MyComponent filter={myFilter}/> inside the only observable you have means that you want refresh only when myFilter object (ie., reference to it) changes. It does not access any of its properties and thus refresh is not needed when those properties change. That's why your component was refreshed when you accessed the filterValue1 property in the console.log statement.

MobX observables change do not always trigger observer components render

2 Answers