Does React convert Object to JSON(string) sometimes?

JavaScript
1

I was following a tutorial and trying to do the next task before the tutor does it, but I made a mistake and discovered something.

In JS, {} !== {}, but it looks like that’s not the case with useState, hook, react or so.

Here is a snippet of what I wrote:

 const renderedOptions = options.map((option, index) => {

// but my code still works
/*
selected and option are both objects 
*/
    if (selected === option) return; // {} !== {} 

// instead of 
    
  if (selected.value === option.value) return;
    return (
      <div
        key={option.value}
        className="item"
        onClick={() => {
          onSelectedChange(options[index]); 
        }}>
        {option.label}
      </div>
    );
  });

So, why is {} === {} in the code above?

See the full code

2 
let obja = {a: 'a'}
let objb = {b: 'b'}
let objc = objb;
// and now see:
objb === obja; // false
obja === objc; // false
// but...
objb === objc; // true

and why the last one is true? well, the two variables point to the same object, as with objc = objb, the two variables point to the same place in the memory.

can something like that be happening here?

1 Like
3

Right, this is confusing to the uninitiated, but when you compare reference types (objects, arrays, functions, etc…) you are not comparing the value, but the reference, or the memory address where the values are stored.

So, in ieahleen’s last example, you are seeing if they point to the same place in memory, which they do. For the expression:

{} === {}; // false

JS is creating two brand new empty objects with different references. The fact that they contain the same (lack of) data is irrelevant - all JS cares about (for this simple comparison) is if they point to the same location in memory. But we can’t interpret that to mean that two object references can never be equal. For example:

const myObj = { howdy: 'there' };
myObj === myObj; // true

The fact that they have the same data isn’t even considered, just the reference.

Yes, it’s a little confusing, but it will make more sense in time.

1 Like
4

I know this thing, but couldn’t think to that extent.
Thanks so much @ilenia @kevinSmith

1 Like