Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useId memory leak in Suspense with concurrent mode #7738

Open
liaoyinglong opened this issue Feb 7, 2025 · 2 comments
Open

useId memory leak in Suspense with concurrent mode #7738

liaoyinglong opened this issue Feb 7, 2025 · 2 comments

Comments

@liaoyinglong
Copy link

liaoyinglong commented Feb 7, 2025

Provide a general summary of the issue here

write idsUpdaterMap in render is not safe. here is example to show it

'use client'

import { useId } from '@react-aria/utils'
import React, { Suspense } from 'react'

let count = 0
function AsyncComponent() {
  if (count < 5) {
    throw new Promise((resolve) => {
      return setTimeout(() => {
        count++
        resolve(true)
      }, 100)
    })
  }

  return null
}

function App() {
  // this Suspense wrapped by router framework
  return (
    <Suspense>
      {Array.from({ length: 1000 }).map((_, index) => (
        <Box key={index} />
      ))}
      {/* In most cases, it is not known that an exception will be thrown here. */}
      <AsyncComponent />
    </Suspense>
  )
}

function Box() {
  const bigData = new Uint8Array(1024 * 10)
  const id = useId()
  return (
    <div
      data-id={id}
      style={{ display: 'none' }}
      onClick={() => {
        console.log(bigData)
      }}
    >
      {id}
    </div>
  )
}

export default App


Image

🤔 Expected Behavior?

useId case memory leak

😯 Current Behavior

useId does not case memory leak

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/practical-payne-pjl639

  • open preview
  • take memory snapshot
  • see Uint8Array references

Version

all

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

all

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

@snowystinger
Copy link
Member

Are you positive you're on the latest version? We had a report and fixed it here #5260
I updated the versions in the codesandbox you shared and I don't see the large array.

I also don't see it on the codesandbox you shared though, so I could be doing something wrong? it doesn't resemble the example code you shared in the description.

@liaoyinglong
Copy link
Author

@snowystinger Sorry, I just gave the wrong link, it has been updated.

@react-aria/utils was latest version.

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants