Callback pattern and callback hell in Node.js - Performance & Optimization

Performance: Callback pattern and callback hell

MEDIUM IMPACT

This concept affects page responsiveness and interaction speed by how asynchronous tasks are managed and how the event loop is utilized.

Handling multiple asynchronous tasks sequentially

Node.js

import { readFile } from 'fs/promises';

async function readFiles() {
  try {
    const data1 = await readFile('file1.txt');
    const data2 = await readFile('file2.txt');
    const data3 = await readFile('file3.txt');
    console.log(data1.toString(), data2.toString(), data3.toString());
  } catch (err) {
    console.error(err);
  }
}

readFiles();

Using async/await flattens code structure, improves readability, and allows the event loop to handle other tasks between awaits.

📈 Performance GainReduces event loop blocking, improving INP and overall responsiveness

Handling multiple asynchronous tasks sequentially

Node.js

fs.readFile('file1.txt', (err, data1) => {
  if (err) throw err;
  fs.readFile('file2.txt', (err, data2) => {
    if (err) throw err;
    fs.readFile('file3.txt', (err, data3) => {
      if (err) throw err;
      console.log(data1.toString(), data2.toString(), data3.toString());
    });
  });
});

Nested callbacks create 'callback hell', making code hard to read and maintain, and can cause delayed event loop processing.

📉 Performance CostBlocks event loop longer due to nested callbacks, increasing INP latency

Performance Comparison

Pattern	Event Loop Blocking	Code Complexity	Responsiveness Impact	Verdict
Nested callbacks (callback hell)	High - long blocking chains	High - hard to read and maintain	High - delays input processing	[X] Bad
Async/await with promises	Low - yields to event loop	Low - clean and readable	Low - fast input response	[OK] Good

Rendering Pipeline

Callback hell causes long synchronous chains that block the event loop, delaying rendering updates and user input processing.

→JavaScript Execution

→Event Loop

→Rendering

⚠️ BottleneckEvent Loop blocking due to nested callbacks

Core Web Vital Affected

INP

This concept affects page responsiveness and interaction speed by how asynchronous tasks are managed and how the event loop is utilized.

Optimization Tips

1Avoid deeply nested callbacks to prevent blocking the event loop.

2Use async/await or promises to flatten asynchronous code.

3Keep the event loop free to maintain fast input responsiveness.

Performance Quiz - 3 Questions

What is the main performance problem caused by callback hell in Node.js?

A Blocking the event loop with long nested callbacks

B Increasing bundle size significantly

C Causing layout shifts in the browser

D Slowing down network requests

DevTools: Performance

How to check: Record a performance profile while interacting with the app. Look for long tasks and event loop blocking in the Main thread.

What to look for: Long blocking tasks and delayed input event handling indicate callback hell issues.

Practice

1. What is the main purpose of a callback function in Node.js?

easy

A. To run code after an asynchronous action finishes

B. To stop the program execution immediately

C. To create a new thread for parallel processing

D. To convert synchronous code into asynchronous code automatically

Solution

1. Step 1: Understand asynchronous actions in Node.js

   Node.js uses callbacks to handle tasks that take time, like reading files or fetching data, without stopping the program.

2. Step 2: Identify the role of the callback

   The callback function runs after the task finishes, allowing the program to continue smoothly.

3. Final Answer:

   To run code after an asynchronous action finishes -> Option A

4. Quick Check:

   Callback = run after async task [OK]

Hint: Callbacks run code after tasks finish [OK]

Common Mistakes:

• Thinking callbacks stop program execution
• Confusing callbacks with threads
• Assuming callbacks convert sync to async automatically

2. Which of the following is the correct function declaration syntax to define a callback function in Node.js?

easy

A. function callback { console.log('Done'); }

B. callback => { console.log('Done'); }

C. function callback() { console.log('Done'); }

D. callback() => { console.log('Done'); }

Solution

1. Step 1: Review function declaration syntax

   In JavaScript, a function is declared with the keyword 'function' followed by parentheses and curly braces.

2. Step 2: Check each option for syntax correctness

   function callback() { console.log('Done'); } uses correct syntax. callback => { console.log('Done'); } is an arrow function expression, not a function declaration. function callback { console.log('Done'); } misses parentheses after function name. callback() => { console.log('Done'); } mixes arrow function and parentheses incorrectly.

3. Final Answer:

   function callback() { console.log('Done'); } -> Option C

4. Quick Check:

   Correct function syntax = function callback() { console.log('Done'); } [OK]

Hint: Function syntax: function name() { } [OK]

Common Mistakes:

• Omitting parentheses in function declaration
• Mixing arrow function syntax incorrectly
• Missing curly braces for function body

3. What will be the output of the following code?

function first(callback) {
  setTimeout(() => {
    console.log('First');
    callback();
  }, 100);
}

function second() {
  console.log('Second');
}

first(second);

medium

A. First\nSecond

B. Second\nFirst

C. First

D. Second

Solution

1. Step 1: Understand setTimeout behavior

   setTimeout delays the function inside it by 100 milliseconds, then runs the callback.

2. Step 2: Trace the code execution order

   first() calls setTimeout, which waits 100ms, then logs 'First' and calls second(). So 'First' prints first, then 'Second'.

3. Final Answer:

   First\nSecond -> Option A

4. Quick Check:

   Callback runs after delay = 'First' then 'Second' [OK]

Hint: setTimeout delays code, callback runs after delay [OK]

Common Mistakes:

• Assuming callback runs immediately
• Confusing order of console logs
• Ignoring asynchronous delay

4. Identify the problem in this nested callback code and how to fix it:

readFile('file1.txt', function(err, data1) {
  if (err) throw err;
  readFile('file2.txt', function(err, data2) {
    if (err) throw err;
    readFile('file3.txt', function(err, data3) {
      if (err) throw err;
      console.log(data1, data2, data3);
    });
  });
});

medium

A. Use synchronous readFileSync to avoid callbacks

B. This is callback hell; fix by using Promises or async/await

C. Syntax error: missing semicolons after callbacks

D. No problem; this is the best way to read files sequentially

Solution

1. Step 1: Recognize nested callbacks cause callback hell

   Multiple nested callbacks make code hard to read and maintain, known as callback hell.

2. Step 2: Suggest modern alternatives

   Using Promises or async/await flattens the code, making it cleaner and easier to follow.

3. Final Answer:

   This is callback hell; fix by using Promises or async/await -> Option B

4. Quick Check:

   Nested callbacks = callback hell, use Promises [OK]

Hint: Nested callbacks = callback hell; use Promises [OK]

Common Mistakes:

• Ignoring readability problems
• Thinking semicolons fix callback hell
• Using synchronous calls in async code

5. You have three asynchronous tasks that depend on each other in sequence. Which approach best avoids callback hell while keeping the tasks in order?

hard

A. Use nested callbacks for each task

B. Use setTimeout to delay each task manually

C. Run all tasks in parallel without waiting

D. Use Promises chaining or async/await syntax

Solution

1. Step 1: Understand the problem of callback hell

   Nested callbacks make code messy and hard to maintain when tasks depend on each other.

2. Step 2: Identify better patterns for sequencing async tasks

   Promises chaining or async/await syntax keep code flat and readable while preserving order.

3. Final Answer:

   Use Promises chaining or async/await syntax -> Option D

4. Quick Check:

   Promises/async await = clean sequential async code [OK]

Hint: Use Promises or async/await for clean async flow [OK]

Common Mistakes:

• Using nested callbacks causing callback hell
• Running tasks in parallel when order matters
• Using setTimeout for sequencing tasks