Why does useState() run in an endless loop if the argument is an object or array?

Question

I'm using the useState() hook in Deno Fresh, which is based on Preact. In an island I have:

import { useState } from "preact/hooks";

export default function(){
  const [state, setState] = useState('hi')
  const str = 'a'
  setState(str)
  console.log(state)
} 

This works fine. But if I use an object instead:

- const str = 'a'
- setState(str)
+ const obj = {a: 'a'} 
+ setState(obj)

Then it's trapped in an endless loop. Why is that?

Answer 1

This boils down to the question:

console.log("a" === "a");
console.log({ x : "a" }  === { x : "a"}); //Why is this false when above is true

Preact or React or JS uses object references to compare objects. Hence, two objects will never be equal. React will not be able to optimize the rendering, even if the objects are technically equal and will keep on rerendering