reactjs / reactjs/react.dev

[Suggestion]: Cap the height of the artificially-slow example output (useDeferredValue / useTransition)

Aperta Adatta ai principianti
#8,486 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

type: documentation
Lingua principale
JavaScript
Stelle
11.8k
Fork
7.9k
Merge medio
1g 11h
PR unite (30g)
11

Descrizione

Summary

When you view the example's rendered output in full, the SlowList/SlowPost demos expand into hundreds of identical rows, which is more than anyone needs to scroll through. The output height should be capped (e.g. max-height + scroll) while keeping the item counts that create the intentional slowdown.

Image Image
Page

https://react.dev/reference/react/useDeferredValue
https://react.dev/reference/react/useTransition

Details

The point of these demos is felt within the first few rows — you just need to see the list "lag behind" the input. But the rendered output shows the full list, so viewing it expands the example to hundreds of identical "Text:" rows and pushes the rest of the docs far down. The number of rows differs across pages (250 / 500 / 50), so the problem shows up unevenly.

Guida per i contributori

Apri la guida per i contributori

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.

Direzione di ricerca

Inizia con gli esempi nelle pagine di riferimento di useDeferredValue e useTransition e analizza il modo in cui SlowList e SlowPost eseguono il rendering del loro output. Limita l’altezza visibile dell’output con lo scorrimento, mantenendo invariati i conteggi degli elementi esistenti e il rallentamento intenzionale, quindi verifica che entrambe le pagine non si espandano più eccessivamente.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, react
Ambito
documentation
Tipo di issue
Funzionalità
Difficoltà
2/5
Tempo stimato
1-3 ore
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
72/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.