Mobx store doesn’t trigger re-render on react-native project

If you were using MobX 6 then you now need to use makeObservable method inside constructor to achieve same functionality with decorators as with MobX 5 before:

import { makeObservable } from "mobx"

class Store {
  @observable string = 'Test String';
  @action setString = (string) => {
    this.string = string;
    console.log(`new value = ${this.string}`);
  };

  constructor() {
    // Just call it here
    makeObservable(this);
  }
}

Although there is new thing that will probably allow you to drop decorators altogether, makeAutoObservable:

import { makeAutoObservable } from "mobx"

class Store {
  // Don't need decorators now
  string = 'Test String';
  setString = (string) => {
    this.string = string;
    console.log(`new value = ${this.string}`);
  };

  constructor() {
    // Just call it here
    makeAutoObservable (this);
  }
}

More info here https://mobx.js.org/migrating-from-4-or-5.html and https://mobx.js.org/react-integration.html

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top