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

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?

Because strings are compared by value and objects by reference - that's a new object every time. — jonrsharpe
– jonrsharpe, Commented May 8, 2024 at 9:27
I suggest reading the caveats in the documentation. An unconditional state setter call in a component function is always a bad idea, whether with a string or something else, and it isn't always guaranteed React won't call the component function again as a result, even when you call it with the same value, though it usually won't. — T.J. Crowder
– T.J. Crowder, Commented May 8, 2024 at 9:33

Tushar Shahi · Accepted Answer · 2024-05-08 09:27:14Z

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

answered May 8, 2024 at 9:27

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ooker Over a year ago

I guess I need to know how setState() works behind the scene. Do you have any good source that you recommend?

Tushar Shahi Over a year ago

react.dev/reference/react/useState

rschristian Over a year ago

For Preact, this is the actual implementation, newArg !== oldArg. As simple of a check as it gets.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related