MobX Invariant failed: Side effects like changing state are not allowed at this point

I'm a JS/React/MobX/else newbie, trying to do something very simple without success.

What I want is - 2 buttons, once clicked, show corresponding tab in a modal, using react-bootstrap and mobx.

But I keep getting this error:

[mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[AuthModal#0.render()] Error: [mobx] Invariant failed: Side effects like changing state are not allowed at this point. Are you trying to modify state from, for example, the render function of a React component? Tried to modify: AuthModalStore@3.tab

Please help. Much appreciated.

code for the store:

import { observable } from 'mobx';

class AuthModalStore {

  @observable show = false;
  @observable tab = 1;

  constructor() {
    this.turnOn = this.turnOn.bind(this);
    this.turnOff = this.turnOff.bind(this);
    this.changeToTab = this.changeToTab.bind(this);
  }

  turnOn(key = 1) {
    console.log('running turnOn');
    this.tab = key;
    this.show = true;
  }

  turnOff() {
    this.show = false;
  }

  changeToTab(key) {
    this.tab = key;
  }

}

const store = new AuthModalStore();

export default store;

react component:

import React from 'react';
import { inject, observer } from 'mobx-react';

import AuthModal from './AuthModal';


@inject('authModalStore')
@observer
export default class AuthButtons extends React.Component {

  handleClick(event) {
    var key;
    switch (event.target.innerHTML) {
      case 'Log In':
        key = 1;
        break;
      case 'Sign Up':
        key = 2;
        break;
      default:
        key = 1;
    }
    this.props.authModalStore.turnOn(key);
  }

  render() {
    return (
      <div className="nav navbar-nav navbar-right">
        {/* login / signup buttons in navbar */}
          <ul className="nav navbar-nav btn-toolbar">
            <li className="btn-group">
              <p className="navbar-btn text-uppercase">
                <a onClick={this.handleClick.bind(this)} className="btn btn-default">Log In</a>
              </p>
            </li>
            <li className="btn-group">
              <p className="navbar-btn text-uppercase">
                <a onClick={this.handleClick.bind(this)} className="btn btn-primary">Sign Up</a>
              </p>
            </li>
          </ul>
          <AuthModal />
        </div>
      );
    }
  }

I see you're changing the mobx-state without the wrapped code being in an action function.

If a function changes the state, then it should be decorated as an action

https://mobx.js.org/refguide/action.html

Actions should only, and always, be used on functions that modify state. Functions that just perform look-ups, filters etc should not be marked as actions; to allow MobX to track their invocations.

Also, if the functions should be bound to the class, then you can use the decorator:

@action.bound

I hope I helped.

Invariant failed: Side effects like changing state are not allowed at , Hi I am getting this error Uncaught Error: [mobx] Invariant failed: Side effects like changing state are not allowed at this point. Are you trying to  [mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[AuthModal#0.render()] Error: [mobx] Invariant failed: Side effects like changing state are not allowed at this point. Are you trying to modify state from, for example, the render function of a React component?


answer was provided here: https://github.com/mobxjs/mobx/issues/829

use this:

<a onClick={() => this.props.authModalStore.changeToTab(2)}>Not a member yet?</a>
<a onClick={() => this.props.authModalStore.changeToTab(3)} className="pull-right">Forgot password?</a>

instead of

<a onClick={this.props.authModalStore.changeToTab(2)}>Not a member yet?</a>
<a onClick={this.props.authModalStore.changeToTab(3)} className="pull-right">Forgot password?</a>

MobX Invariant failed: Side effects like changing state are not , 3 Answers. I see you're changing the mobx-state without the wrapped code being in an action function. Actions should only, and always, be used on functions that modify state. Functions that just perform look-ups, filters etc should not be marked as actions; to allow MobX to track their invocations. Uncaught Error: [mobx] Invariant failed: Side effects like changing state are not allowed at this point. Are you trying to modify state from, for example, the render function of a React component?


If you want to change something in your store you need to use action as mobx state here

Your import should look like this:

import { action, observable } from 'mobx';

Your function should look like this:

@action
turnOn(key = 1) {
  console.log('running turnOn');
  this.tab = key;
  this.show = true;
}

In Mobx you cannot mutate the observable outside the action.

MobX Side effects like changing state are not allowed at this point , I'm not trying to modify state from render function. Actually, it's work if I remove <ul​> tag. I don't know what to say. Please, StackOverflow gives  Uncaught Error: [mobx] Invariant failed: Computed values are not allowed to cause side effects by changing observables that are already being observed.


MobX Invariant failed: Side effects like changing state are - iOS, MobX Invariant failed: Side effects like changing state are not allowed at this point - react-router. Invariant failed: It is not allowed to change the state when a computed value or transformer is being evaluated. Use 'autorun' to create reactive functions with side-effects. #418


(@)computed · MobX, For example imperative side effects like logging, making network requests etc. Computed values are automatically derived from your state if any value that affects them changes. Nor will a computed property re-run if is not in use by some other computed For example, a computed moment instance could use (a, b) => a. VM428 mobx.umd.js:2722 Uncaught Error: [mobx] Invariant failed: It is not allowed to change the state when a computed value or transformer is being evaluated. Use 'autorun' to create reactive functions with side-effects.


MobX Api Reference · MobX, Observable maps are very useful if you don't want to react just to the change of a specific The expression should not have side effects but return a value. This means the observable state that you are mutating, will fail the enforceActions check. In strict mode, it is not allowed to change any state outside of an action . This saves tons of boilerplate and has a significant positive impact on performance. Computed values are enforced to be side-effect free. Because computed values are not allowed to have side effects, MobX can safely reorder the execution order of computed values to guarantee a minimal amount of re-runs.