Skip to content

useId stuck in infinite loop with streaming render #406

@f0x52

Description

@f0x52
  • Check if updating to the latest Preact version resolves the issue

Describe the bug
I encountered an infinite loop in the useId hook, when trying to debug a different issue relating to useId/Suspense.

<div>
  <Suspense fallback="suspense-1">
    <ComponentOne/>
  </Suspense>
  <Suspense fallback="suspense-1">
    <ComponentTwo/>
  </Suspense>
</div>

With this component tree, where ComponentOne and ComponentTwo both load a lazy() component, as soon as rendering resumes on the first Suspense boundary, the useId hook inside ComponentOne loops infinitely.

To Reproduce
https://codesandbox.io/p/devbox/preact-useid-infinite-loop-4clmdc?workspaceId=ws_Hyb2mUcrQ6TVf2LBce8QH7

Launching the run/debug configuration 'Run program' will try to do a server-side streaming render with two Suspense boundaries, both of which have a component that logs the output of the useId hook, and then loads a lazy() wrapped component.

As debug output you will see:

render ComponentOne
  ComponentOne useId: P0-0
render ComponentTwo
  ComponentTwo useId: P0-1
resolved async component
render ComponentOne

After which the process freezes (and Codesandbox pops up a 'CPU usage 100%' in the top bar). If you pause the debug, you can see it's stuck in an infinite while loop in useHook, because root._parent is a circular reference.
https://github.com/preactjs/preact/blob/1226aae23826e0d703b520cb764749e04f571043/hooks/src/index.js#L431-L433

Expected behavior
Render finished, expected output

render ComponentOne
  ComponentOne useId: P0-0
render ComponentTwo
  ComponentTwo useId: P0-1
resolved async component
render ComponentOne
  ComponentOne useId: P0-0
resolved async component
render ComponentTwo
  ComponentTwo useId: P0-1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions