mobx-react observer don’t fires when I set observable

by

Are you using MobX 6?

Decorator API changed a little bit from MobX 5, now you need to use makeObservable method inside constructor to achieve same functionality as before:

import { observable, action, makeObservable } from "mobx";

export class TestStore {
    @observable timer = 0;

    constructor() {
      makeObservable(this);
    }

    @action timerInc = () => {
        this.timer += 1;
    };
}

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

import { makeAutoObservable } from "mobx";

export class TestStore {
    timer = 0;

    constructor() {
      // Don't need decorators now, just this call
      makeAutoObservable(this);
    }

    timerInc = () => {
        this.timer += 1;
    };
}

More info here: https://mobx.js.org/react-integration.html

More Related Contents:

  1. How to assign the correct typing to React.cloneElement when giving properties to children?
  2. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  3. Uncaught TypeError: Cannot read property ‘state or props’ of undefined
  4. What’s the difference between “super()” and “super(props)” in React when using es6 classes?
  5. Dynamically import images from a directory using webpack
  6. Programmatically navigate using react router V4
  7. PropTypes in a TypeScript React Application
  8. How to use refs in React with Typescript
  9. Typescript image import
  10. Differences between creating a new class to using export const
  11. Set types on useState React Hook with TypeScript
  12. Updating React state when state is an array of objects
  13. Unexpected block statement surrounding arrow body
  14. React: Which is recommended arrow or normal function?
  15. How to type a page component with props in Next.js?
  16. What does the colon mean in Javascript after function?
  17. React Hooks – Modified state not reflecting immediately
  18. React Hooks – Modified state not reflecting immediately
  19. React with Typescript — Generics while using React.forwardRef
  20. Difference between import React and import { Component } syntax [duplicate]
  21. Is it possible to limit children to specific components using React with TypeScript?
  22. is it possible to React.useState(() => {}) in React?
  23. How do I type this ‘as’ JSX attribute in TypeScript?
  24. How to define css variables in style attribute in React and TypeScript
  25. Disable ESLint that create-react-app provides
  26. Webpack & Typescript image import
  27. Only allow specific components as children in React and Typescript
  28. Put A Warning If Page Refresh in ReactJS
  29. import * as React from ‘react’; vs import React from ‘react’;
  30. ‘React’ was used before it was defined

Leave a Comment