Bug: Array.push creating duplicated children - unexpected memory views

[drfbwilliams]

I have reviewed my code for a solid 2 days to understand if this is me, or React. I am pretty convinced this is down to React.

I have a simple Class that extends Component

It has no state defined

It has a simple local variable defined - an empty but strongly typed Array

On first load, the Array is empty. I have a method on the class to parse a strongly typed parameter.

When the method is called, I can see in Chrome dev tools that the Array magically already has not one, but two variables stored in the Array.

Yes, you read that correctly - the dev tools show two strongly typed variable already added to the Array - even though no .push has occured at this point.

How is that possible?

Also consider that the method calling this class, has only created a single variable - yet as the boxes #2 show, two items are indeed created with different key values ( see above, the second item is correct - shown as red box #1 on the image below - you can see again, two items in the array tagged Gi)

As shown in box#3 - that console.log is showing the single parameter, and confirms that the object is created with the same key as shown in object two, in box#2

From here it just gets stranger

Box#4 is a quick index test on the Array, checking if the object has been magically added - the response is -1

This confirms some form of voodoo has occurred to show the object in Box#1 is a complete lie

So Box#5 is showing the console.log of the Array - again showing the two items, but again, this is before the .push method has been called

Box#6 is after the .psuh call, which now shows what looks to be a duplicated object with [Gi, Gi] in the array

Box#7 shows that this is one magical object and the actual object having been added to the Array

Now - what happens if we comment out the .push call and run again?

As expected, there is no magical object and no object added to the array.

Some serious issues going on here.

Please help keep my sanity and point out my stupidity somewhere.

React version:

package.json

"devDependencies": { "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "css-loader": "^5.0.1", "framer": "^1.2.10", "framer-motion": "^2.9.4", "react": "^17.0.1", "react-dom": "^17.0.1", "react-marquee-slider": "^1.1.2", "react-router-dom": "^5.2.0", "react-scripts": "^4.0.1", "source-map-loader": "^1.1.2", "style-loader": "^2.0.0", "ts-loader": "^8.0.11", "uuid": "^8.3.1", "webpack": "^5.6.0", "webpack-cli": "^4.2.0" }, "dependencies": { "botframework-directlinejs": "^0.11.6", "typescript": "^4.0.5" }

[eps1lon]

Objects (JS arrays are objects) logged into chrome devtools are "live". So what you see in devtools when expanding objects is not the value at the time you called console.log but the value when chrome expanded the object.

This is similar to

const obj = {children: [1]};
console.log(obj); // {children: Array(1)

obj.children = []
console.log(obj); // {children: Array(0)

-- https://fwtk3.csb.app/

But expanding the both objects will display children: [].

So this is not something caused by React nor can React do something about it. If you're interested in the value of obj.someValue then you have to log that instead of just obj.

Further reading:

• Google Chrome console.log() inconsistency with objects and arrays
• What gets logged in the console when you’re mutating objects

[drfbwilliams]

Thanks for the response @eps1lon and the links

They are looking at bugs reported against mutating objects AFTER they are pushed into an array - not before it.

Your example shows this

const obj = {children: [1]}; console.log(obj); // {children: Array(1)

my example effectively shows this

const obj = {children: [1]}; console.log(obj); // {children: Array(**2**)

I think the point is being missed here - at the end of the function, there is indeed two object in the array. Because this class is an observer service, notification are sent to the objects in the array - so 2 notifications are sent.

That has nothing to do with chrome devtools and everything to do with an Array not storing objects correctly.

I do not see this happening in pure JS, or Typescript - deduction is that these objects are being injected into the REACT-Dom which is where the issue is.

Keep it closed if you wish - doesn't make the problem go away though.

Thanks for your help and response though - I do appreciate it.

[eps1lon]

Without a reproduction it's impossible to know for sure. If you provide codesandbox I can take a look again. Though I'm fairly certain it has to do with live objects. You can verify this yourself by logging JSON.stringify(object) and checking if the result is different.

[drfbwilliams]

Thanks for that. I will take a look as you suggest - failing that I will attempt a small repro if I'm still see it.

Cheers