-
-
Notifications
You must be signed in to change notification settings - Fork 95
Description
- 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