what happens in react when setState with object instance of a class

Question

I have this fiddle

let m = new Mine();
this.setState(m, () => {
    console.log('1:', m instanceof Mine, m.x, m.meth);
    // => 1: true 123 function meth() {}
    console.log('2:', this.state instanceof Mine, this.state.x, this.state.meth);
    // => 2: false 123 undefined
});

As you can see I create an instance of the Mine class and then set state in a react component with that instance.

I would expect this.state to contain exactly that instance but while the instance properties that are set in the constructor are available I can't access any of the class methods on that instance.

The test in the fiddle shows that this.state is not an instance of the class Mine.

Does anybody understand what is going on or is this unintended behavior?

Answer 1

After more investigation I found out the reason why that happens.

The function _processPendingState from react uses Object.assign to set the new state, so since the target object is a new object (different than what is passed to setState) the new state loses the quality of being an instance of the "Mine" class.

And because Object.assign only copies own enumerable properties from the sources to the target the new state also won't have the class methods.

If in the fiddle we replace the line...

let m = new Mine();

with...

let m = {x: 123};
Object.defineProperty(m, 'meth', {
    enumerable: false,
    get() { return function() {}; }
});

we still don't have the "meth" property on the resulting state. Even if "m" owns the "meth" property it is not enumerable.