Promise.race and Promise.allSettled in Node.js - Performance & Optimization

Performance: Promise.race and Promise.allSettled

MEDIUM IMPACT

This concept affects how asynchronous operations impact page responsiveness and resource usage during concurrent tasks.

Handling multiple asynchronous tasks and responding as soon as one finishes

Node.js

await Promise.race([task1(), task2(), task3()]); // resolves or rejects as soon as one task settles

Returns as soon as the first promise settles, improving responsiveness and reducing wait time.

📈 Performance Gainreduces blocking time, improves INP by responding faster

Handling multiple asynchronous tasks and responding as soon as one finishes

Node.js

await Promise.allSettled([task1(), task2(), task3()]); // waits for all tasks to finish

This waits for all tasks to complete even if you only need the first result, delaying response time.

📉 Performance Costblocks interaction until all promises settle, increasing INP

Performance Comparison

Pattern	Async Wait Time	UI Responsiveness	Resource Usage	Verdict
Promise.allSettled for first result	Long (waits all)	Low (delayed)	High (all tasks run fully)	[X] Bad
Promise.race for first result	Short (first settles)	High (fast response)	Moderate (tasks still run)	[OK] Good
Promise.all for all success	Medium (waits all success)	Medium (may reject early)	High (may retry)	[!] OK
Promise.allSettled for all results	Long (waits all)	High (stable UI)	Moderate (no retries)	[OK] Good

Rendering Pipeline

Async promise handling affects the JavaScript execution and event loop stages, influencing when UI updates can occur.

→JavaScript Execution

→Event Loop

→Rendering

⚠️ BottleneckJavaScript Execution blocking UI updates while waiting for promises

Core Web Vital Affected

INP

This concept affects how asynchronous operations impact page responsiveness and resource usage during concurrent tasks.

Optimization Tips

1Use Promise.race to improve responsiveness by reacting to the first settled promise.

2Use Promise.allSettled to get results from all promises without early rejection.

3Avoid Promise.all if you need full results and want to prevent retries or UI flicker.

Performance Quiz - 3 Questions

Which Promise method returns as soon as the first promise settles, improving responsiveness?

A Promise.all

B Promise.allSettled

C Promise.race

D Promise.resolve

DevTools: Performance

How to check: Record a performance profile while running async tasks; look at the JavaScript call stacks and event loop delays.

What to look for: Check for long blocking times in JS execution and delayed UI updates indicating slow promise resolution.

Practice

1. What does Promise.race do when given multiple promises?

easy

A. Cancels all promises except the first one.

B. Waits for all promises to finish and returns their results.

C. Returns only the results of promises that resolved successfully.

D. Returns the result or error of the first promise that finishes.

Solution

1. Step 1: Understand Promise.race behavior

   Promise.race returns as soon as any promise settles (resolves or rejects).

2. Step 2: Compare with other Promise methods

   Unlike Promise.all or allSettled, it does not wait for all promises.

3. Final Answer:

   Returns the result or error of the first promise that finishes. -> Option D

4. Quick Check:

   Promise.race = first finished promise result [OK]

Hint: Remember race means first to finish wins [OK]

Common Mistakes:

• Thinking it waits for all promises
• Assuming it only returns successful results
• Believing it cancels other promises

2. Which of the following is the correct syntax to use Promise.allSettled with an array of promises named tasks?

easy

A. Promise.allSettled(tasks).finally(() => console.log('done'));

B. Promise.allSettled(tasks).catch(error => console.log(error));

C. Promise.allSettled(tasks).then(results => console.log(results));

D. Promise.allSettled(tasks).resolve(results => console.log(results));

Solution

1. Step 1: Recall Promise.allSettled usage

   Promise.allSettled returns a promise that resolves with an array of results.

2. Step 2: Check correct method chaining

   We use .then() to handle the resolved results, not .catch() or .resolve().

3. Final Answer:

   Promise.allSettled(tasks).then(results => console.log(results)); -> Option C

4. Quick Check:

   Use .then() to get allSettled results [OK]

Hint: Use .then() to handle Promise.allSettled results [OK]

Common Mistakes:

• Using .catch() instead of .then() for results
• Trying to use .resolve() method on promise
• Assuming .finally() receives results

3. Consider the code:

const p1 = new Promise(res => setTimeout(() => res('A'), 100));
const p2 = new Promise((_, rej) => setTimeout(() => rej('Error'), 50));
Promise.race([p1, p2])
  .then(console.log)
  .catch(console.error);

What will be printed?

medium

A. 'Error'

B. 'A'

C. An array of results

D. Nothing, code throws syntax error

Solution

1. Step 1: Identify which promise settles first

   p2 rejects after 50ms, p1 resolves after 100ms, so p2 finishes first.

2. Step 2: Understand Promise.race behavior on rejection

   Promise.race rejects immediately with the first rejection, so .catch logs 'Error'.

3. Final Answer:

   'Error' -> Option A

4. Quick Check:

   First finished promise is rejection 'Error' [OK]

Hint: Check which promise settles first, resolve or reject [OK]

Common Mistakes:

• Assuming resolve wins over reject
• Expecting an array instead of single result
• Thinking code throws syntax error

4. What is wrong with this code snippet?

const promises = [Promise.resolve(1), Promise.reject('fail')];
Promise.allSettled(promises).catch(console.error);

medium

A. Promise.allSettled requires async/await syntax.

B. Promise.allSettled never rejects, so .catch will never run.

C. Promises array must contain only resolved promises.

D. You must use .then() before .catch() with allSettled.

Solution

1. Step 1: Recall Promise.allSettled behavior

   It waits for all promises and never rejects, it always resolves with results.

2. Step 2: Understand .catch usage here

   Since it never rejects, .catch will never be called, so error handling is ineffective.

3. Final Answer:

   Promise.allSettled never rejects, so .catch will never run. -> Option B

4. Quick Check:

   allSettled always resolves, .catch unused [OK]

Hint: allSettled never rejects, so .catch is useless here [OK]

Common Mistakes:

• Thinking allSettled rejects on any promise failure
• Believing async/await is required
• Assuming .then() must come before .catch() always

5. You want to run three tasks: task1, task2, and task3. You want to get the first task that finishes successfully, but if all fail, you want to know all errors. Which approach correctly achieves this?

hard

A. Use Promise.race on all tasks, then if it rejects, run Promise.allSettled to get all errors.

B. Use Promise.allSettled first, then pick the first successful result from the array.

C. Use Promise.all on all tasks and catch errors to get all results.

D. Use Promise.race and ignore errors from rejected promises.

Solution

1. Step 1: Understand requirement for first success or all errors

   Promise.race gives first finished promise, but may reject if first is failure.

2. Step 2: Combine Promise.race and Promise.allSettled

   If Promise.race rejects, then run Promise.allSettled to collect all errors from all tasks.

3. Step 3: Evaluate other options

   Promise.allSettled alone waits for all, no early success; Promise.all fails fast; ignoring errors loses info.

4. Final Answer:

   Use Promise.race on all tasks, then if it rejects, run Promise.allSettled to get all errors. -> Option A

5. Quick Check:

   race first success, allSettled for all errors [OK]

Hint: Race first success, fallback to allSettled for errors [OK]

Common Mistakes:

• Using allSettled only and waiting too long
• Ignoring rejected promises in race
• Using all which fails on first rejection