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

Open Beginner friendly
#8,486 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
javascript, react
Domain
documentation

Research direction

Start with the examples on the useDeferredValue and useTransition reference pages and inspect how SlowList and SlowPost render their output. Cap the visible output height with scrolling while preserving the existing item counts and intentional slowdown, then verify both pages no longer expand excessively.

Written by the indexing model from the issue text.

Description

type: documentation
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.

Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
16h 6m
Merged PRs (30d)
7

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from reactjs/react.dev

All issues in reactjs/react.dev

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.