Skip to content

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

@chriserickson

Description

@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.

Activity

gaearon

gaearon commented on Mar 30, 2022

@gaearon
Collaborator

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

gaearon commented on Apr 1, 2022

@gaearon
Collaborator
gaearon

gaearon commented on Apr 11, 2022

@gaearon
Collaborator

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

gaearon commented on Apr 27, 2022

@gaearon
Collaborator

18.1.0 should include the fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @gaearon@chriserickson

        Issue actions

          Bug: useDeferredValue with a value that is new every render hangs browser · Issue #19925 · facebook/react