Bug: useDeferredValue with a value that is new every render hangs browser

[chriserickson]

React version: 0.0.0-experimental-94c0244ba

Steps To Reproduce

Attempt to load the following component:

export default function Component() {
  const value = { something: "I'm new every render" };
  const deferredValue = React.unstable_useDeferredValue(value, {
     timeoutMs: 3000
  });
  console.log("Component render");
  return (
    <div>{deferredValue}</div>
  );
}

The above (buggy) component will peg the CPU and hang the browser. While this is understandable (there are theoretically infinite concurrent trees), it is an easy pitfall for someone to fall into.

Not sure if this could be identified by a console warning or lint rule.

The current behavior

Browser hangs.

The expected behavior

A lint rule informs me of my error or the console warns me that the deferred value changes every render.

[gaearon]

Just to update — this is still how it works today. We think we might have a strategy that can avoid this in the future, but not for the 18 release.

[gaearon]

#24247

[gaearon]

Hmmm. This is very strange but I can't reproduce this even with the original version and example that you added. And the new PR is meant to address this case further. I think we can close this, but if it's still reproducible with the @next builds, let me know.

[gaearon]

18.1.0 should include the fix.