Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Bug/Feature Request]: `usePerformanceMarks` has ID generation incompatible with Next.js Partial Prerendering

Aperta
  • Qualcosa non va?
#5,023 1 commento 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

@amanabiy ci sta già lavorando.

Dal 1/10/2026.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

enhancement
Description

Summary: usePerformanceMarks calls Math.random()/Date.now() during initial render, breaking Next.js Partial Prerendering

Premise

Next.js Partial Prerendering (PPR) executes the React render pass ahead of time to produce a static shell. During this prerender pass, Next.js will report an error for any unstable values from non-deterministic operations.

The usePerformanceMarks hook currently derives its instance id from useRandomId which is evaluated during prerender with an expression based on unstable values

idRef.current  = `${counter++}-${Date.now()}-${Math.round(Math.random() * 10000)}`;

Even though this value is not immediately injected into the UI (since useDOMAttribute defers it), Next.js still reports an error from the potential instability for any Cloudscape component with usePerformanceMarks (e.g. Button, Table). This is notably problematic since the SideNavigation component for AppLayout has an instance of Button.

Proposal

Replace the random generator for the id in usePerformanceMarks with the existing useUniqueId which is backed by React.useId on React 18+.

Change: in src/internal/hooks/use-performance-marks/index.ts

- import { useRandomId } from '../use-unique-id';
+ import { useUniqueId } from '../use-unique-id';
...
- const id = useRandomId();
+ const id = useUniqueId();

React.useId produces unique and stable identifiers that are consistent between server and client.

This was previously flipped in #2345 for an unclear reason:

  • There shouldn't be any hydration concerns since the value is not injected into the DOM until the client-side hook runs
  • With the React IDs, there might be a need to escape or transform the colon characters (e.g. :r0:) to be compatible with selector logic, e.g. [data-analytics-performance-mark="${id}"])
Possible Alternative

Since the value is only ever used on the client (written in useEffect, read back from the perf mark on the client), the generation could be deferred until the ID is consumed (at the cost of messier code), see Lazy-initialize a stable ID with useRef

function getOrCreateId(ref: RefObject<string | null>) {
  if (ref.current === null) {
    ref.current = ... // generate
  }
  return ref.current;
}

function usePerformanceMarks(...) {
  const idRef = useRef<string | null>(null);
  const getId = useCallback(() => getOrCreateId(idRef), []);

  // update useDOMAttribute to accept both value or getter function

  // call `getId` inside `useEffect` for `instanceIdentifier
}

Or alternatively provide a way to opt out of performance marks

Reproduction
  1. Create Next.js 16 application and install Cloudscape components
  2. Enable cacheComponents in next.config.ts
  3. Add a Cloudscape Button to any page
  4. Load page from dev server or attempt to build app
  5. Observe error

    Error: Route "/": Next.js encountered the unstable value Date.now() in a Client Component.
    This value would be evaluated during the prerender, instead of recomputed on each visit.

Code of Conduct
Lingua principale
TypeScript
Stelle
2.7k
Fork
248
Merge medio
3g 14h
PR unite (30g)
83

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di cloudscape-design/components

Tutte le issue di cloudscape-design/components

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.