Frontory

Open code, practice, and notes →

Download source with English comments · for reading

React · 20 Transitions and Deferred Results

Series contents · Technology map

Stage: Preserving notes and measuring renders · Editable example · Storage ID: react-step-20

Goals and learning outcomes

Prerequisites

Unit 20 continues using the work and experiment records from Unit 19.

Key concepts and explanations

Urgent Input

The input string is a value users need to see immediately. It does not have to share the priority of expensive result updates.

Deferred Values

useDeferredValue temporarily shows the previous value while preparing to render new results. Wrap the slow child in memo and keep its other props stable to skip child work during urgent input renders; this differs from debounce.

Practice setup

First check the execution scope guidance on the example screen. The following environment is for extending the assignment in a separate project. This is a JSX exercise in a separate React Vite project. Record Node and package versions and the lockfile, and run it on the project development server. The built-in editor is not a general-purpose JSX compiler.

The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.

Practice tasks

  1. Create a filter for 5000 titles in src/LargeList.jsx and wrap it in memo. Keep references to list data and event props stable.
  2. In the parent, defer query with useDeferredValue and pass deferredQuery to LargeList inside the memo boundary. This exercise does not assume React Compiler automatic memoization.
  3. Under CPU throttling, compare with a control without memo. Record responsiveness over 10 inputs, list render logs, the deferred indicator, and final search results.

Variables to observe

VariableBaselineChangeExpected change / hypothesis
List queryImmediate valuedeferred valueInput appears immediately, while the list may keep previous results briefly.

Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.

Completion criteria

Self-check

  1. Does a deferred value reduce network requests?
  2. What problems arise if the input state itself is put in a transition?

Official references

Linked example and execution scope

Example source · Runtime environments and limits

This is an experiment using actual React APIs. It uses createElement instead of JSX.

Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.

Next learning

Previous: Making Asynchronous State Explicit · Next: Finding Bottlenecks with Profiler

Open code, practice, and notes →