React.Component 'this' changed in ComponentDidMount

Question

How can be possible that 'this' in React.Component life cycle have changed to different object? In render() and in componentDidMount() this points to different objects?

I use React 16.0.0
All life-cycle methods called only once
I transpile Typescript with Webpack
I couldn't repeat it in a browser, in browser one === two // true
I have very big app, so I thought it can be ReactFiber some kind of optimization?

Like here: JsBin

Can you copy your code where you make your test ? Can you output the value of one and two ? — ChrisR, Mar 16 '18 at 11:32
could it be a copy and not a reference thus different object values (assigned at different times)? — Lukasz 'Severiaan' Grela, Mar 16 '18 at 11:38
@ChrisR added a screen, Lukasz about what variabe you talk about? `one` and `two` or `this` — Mihey Mik, Mar 16 '18 at 11:43
@MiheyMik in your JSBin it returns `true` (I had to add `
` to the HTML so the component renders). — Facundo Matteo, Mar 16 '18 at 11:51
@MiheyMik one and two as this is the reference to the object. I think using Object.assign copies properties as new object thus you have a snapshot that will differ over time as React will change some props. — Lukasz 'Severiaan' Grela, Mar 16 '18 at 13:07

score 0 · Answer 1 · answered Mar 16 '18 at 12:53

0

As you can see, the two has more properties. It's because at first output in constructor it's a pure Javascript Class. And then, React comes along and alter the Class before, during and after the render.

answered Mar 16 '18 at 12:53

ChrisR

3,922
1
14
24

Well, get it, but this doesn't answer my question, why this changes to different object – Mihey Mik Mar 18 '18 at 05:22
It **is** the same object, it just doesn't have the same properties after being altered by React. So the `===` strict equality expression returns false. – ChrisR Mar 19 '18 at 08:46
this isn't how js `===` operator works. the object is same when variable pointers to the same object from left and right sides of `===` – Mihey Mik Mar 19 '18 at 10:51

score 0 · Answer 2 · answered Mar 16 '18 at 20:50

0

Take this example:

var a = {one:"1"};

var b = a;

a==b  // true
a===b // true
var c = Object.assign({}, a);

c     //{one: "1"}
a===c // false
a==c  // false

The call to Object.assign created a copy of the object thus inequality.

answered Mar 16 '18 at 20:50

Lukasz 'Severiaan' Grela

6,078
7
43
79

Lukasz this doesn't answer my question. `Object.assign` - assigns new properties to the first argument. In my case is 'window' object. So this lets me aterwards in the console see `one` and `two` values – Mihey Mik Mar 18 '18 at 05:24

React.Component 'this' changed in ComponentDidMount

2 Answers2