React feels slow. What should you measure first?
Record the slow interaction before reaching for memo. Check Network for request waiting, React Profiler for component rendering, and Chrome Performance for main-thread work.
The example starts independent requests together with Promise.all. Only parallelize work that does not need the other result; rejection does not automatically cancel the remaining request. The timeline is illustrative, not a speed benchmark.
Understand it. Then fix it.
Record the slow interaction first.
Record the exact interaction in Chrome Performance. Check Network for waiting, and React Profiler for component rendering. A slow response is not automatically a slow render.
These requests wait in a line.
Suppose the recording shows these independent requests running one after another. The second starts only when the first finishes. Memoizing a component cannot remove that wait.
const products = await getProducts();
const reviews = await getReviews();Independent? Start both.
Promise dot all lets both start before awaiting the results. Use this only when neither request needs the other's output. Handle failure; it does not cancel the other request.
const [products, reviews] =
await Promise.all([
getProducts(),
getReviews()
]);Measure the same action again.
Repeat the recording with the same conditions. If rendering dominates instead, investigate that subtree. Choose the fix from the evidence, not from your favorite hook.
Code blocks are teaching excerpts. Keep the surrounding error handling and application requirements.
Save the code excerpts ↓Read the full transcript
React feels slow. What should I measure first? I memoized the button. The server remains deeply unimpressed. Record the exact interaction in Chrome Performance. Check Network for waiting, and React Profiler for component rendering. A slow response is not automatically a slow render. Suppose the recording shows these independent requests running one after another. The second starts only when the first finishes. Memoizing a component cannot remove that wait. Promise dot all lets both start before awaiting the results. Use this only when neither request needs the other's output. Handle failure; it does not cancel the other request. Repeat the recording with the same conditions. If rendering dominates instead, investigate that subtree. Choose the fix from the evidence, not from your favorite hook. The button is now extremely efficient at waiting for the backend.
