componentDidUpdate inferno-mobx prevProps are equal to this.props

[TotallWAR]

Observed Behaviour

Prevprops.state.someValue.var in inferno component method componentDidUpdate are equal to this.props.state.someValue.var

Expected Current Behaviour

Props are should be different

Inferno Metadata

macOS
Chrome

I use inferno-mobx.
packages' versions:
"inferno": "^7.3.2",
"inferno-clone-vnode": "^7.3.2",
"inferno-component": "^7.3.2",
"inferno-hydrate": "^7.3.2",
"inferno-loadable": "^5.4.3",
"inferno-mobx": "^7.3.2",
"inferno-router": "^7.3.2",
"inferno-server": "^7.3.2"
"mobx": "^5.14.0"

I tried to create full copy of object in state and set new value into it like in react-redux but it didn't help.

// class which update state
// stores/questionnaire.js

import { action, runInAction } from 'mobx';
export default class Questionnaire {
  constructor(state) {
    this.state = state;
  }
 
 @action setStepNumber(stepNumber) {
    runInAction(() => {
      try {
        this.state.questionnaire.stepNumber = stepNumber;
        this.state.questionnaire.currentQuestionName = this.state.config.enabledQuestions[
          stepNumber
        ].name;
      } catch (e) {
        console.error(e.message);
        console.error(e.stack);
      }
    });
  }
}

// my component

import { inject, observer } from 'inferno-mobx';
import { computed, observable, toJS } from 'mobx';

@inject('state', 'store')
@observer
export default class Questionnaire extends Component {
  constructor(props) {
    super(props);

    this.handleFooterButtonClick = this.handleFooterButtonClick.bind(this);
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (
      prevProps.state.questionnaire.stepNumber !==
      this.props.state.questionnaire.stepNumber
    ) {
      try {
        this.props.history.push(
          this.props.state.config.enabledQuestions[
            this.props.state.questionnaire.stepNumber
          ].name
        );
      } catch (e) {
        // TODO LOG ERROR
      }
    }
  }

  handleFooterButtonClick() {
    this.props.store.questionnaire.setStepNumber(
      this.props.state.questionnaire.stepNumber + 1
    );
  }

  render(props) {
    const { state, store, route } = props;
    const { content, questionnaire, config } = state;
    if (!content || !questionnaire || !config) {
      return '';
    }
    return (
      ... 
    );
  }
}

// my initial state class

import { extendObservable, observable, set } from 'mobx';

/**
 * This is our state, we update it
 * using the methods from other stores
 */
export default class State {
  constructor(state) {
    // init state obj
    extendObservable(this, {
      questionnaire: {
        stepNumber: 0,
        completedSteps: 0
      }
    });

    // set current state
    set(this, state);
  }
}

import Questionnaire from '../stores/questionnaire';

export default state => {
  return {
    state,
    store: {
      questionnaire: new Questionnaire(state),
    }
  };
};

[Havunen]

Hi @TotallWAR

Can you create simple demo to reproduce the issue please. For example JsFiddle https://jsfiddle.net/2nm1kqct/ or github repo.

[TotallWAR]

@Havunen i created:

https://codesandbox.io/s/inferno-mobx-props-not-updating-un8gy

Clicking inc will cause logs of prev and current props in console

[Havunen]

I checked your codesandbox example and Inferno core -wise this is working correctly. Because Questionnaire Component does forceUpdate so there are no new props its just rendering again. Whether this is expected behavior from inferno-mobx I dont know.

By wrapping all components inside HoC we could achieve the props changing. We need to check how React / React-mobx does it to verify the correct behavior.