DEV Community: Akshay

🍽️ Why You Don’t Need 20 Waiters in a Restaurant (👨‍🍳 = JavaScript Insight)

Akshay — Mon, 19 May 2025 07:56:28 +0000

Understanding event bubbling, event capturing, and why events exist at all — with restaurant and classroom stories you’ll never forget.

Why Events Are Needed 📱Imagine a food delivery app. You click the “Order Now” button… and nothing happens🤷‍♂️. No sound. No feedback. No confirmation. Just dead silence.

That’s what happens when a page doesn’t listen for user events. Without events:

You can’t respond to button clicks
Can’t handle form submissions
Can’t open/close modals
Can’t run animations or logic

Events are how JavaScript knows something has happened — and gives you a chance to respond.

Why Event Bubbling and Capturing Were Introduced?

Let’s jump into our main metaphor:

🍽️ The Restaurant Waiter Story

Scenario 1 – A waiter per table:
Imagine a restaurant with 20 tables. To handle orders, you assign 20 waiters – one per table.

Now every time a customer waves, a different waiter responds.

🛑 Problem:

Too much overhead
Hard to manage
Doesn’t scale

✅ The Smart Waiter Strategy

Now instead of 20 waiters, you hire 1 smart waiter who stands near the door.

He watches all tables.
When someone waves (clicks), he steps in and takes the order.
Efficient, less chaos.

🔁 3. What is Event Bubbling?

*Event bubbling means the event starts from the clicked element and moves upward in the DOM hierarchy.
*

Child → Parent → Grandparent → Document

👨‍👩‍👧 Family Tree Example:

<div id="grandparent">
  Grandparent
  <div id="parent">
    Parent
    <div id="child">Child</div>
  </div>
</div>

🧠 Bubbling Code Example:

`document.getElementById("grandparent").addEventListener("click", () => {
console.log("Grandparent clicked");
});

document.getElementById("parent").addEventListener("click", () => {
console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", () => {
console.log("Child clicked");
});`

🧪 Output when clicking on child:

> Child clicked
> Parent clicked
> Grandparent clicked

🌊 The event bubbles up from child to grandparent.

🔄 4. What is Event Capturing?

Event capturing is the opposite direction.
The event starts from the top (document) and travels downward to the actual element.

Document → Grandparent → Parent → Child

🧠 Capturing Code Example:

document.getElementById("grandparent").addEventListener("click", () => {
  console.log("Grandparent captured");
}, true); // 👈 third param true = capturing

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent captured");
}, true);

document.getElementById("child").addEventListener("click", () => {
  console.log("Child captured");
}, true);

🧪 Output when clicking on child:

Grandparent captured
Parent captured
Child captured

🔎 Capturing allows you to intercept or monitor events before they reach the child.

✋ 5. What is event.stopPropagation()?

Sometimes, you don’t want the event to keep traveling up or down the DOM tree.

Example: You want to handle the event at the child and stop it there.

📌 Code Example:

document.getElementById("child").addEventListener("click", (e) => {
  console.log("Child clicked - Stopping propagation");
  e.stopPropagation(); // 👈 stops the event here
});

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent clicked");
});

document.getElementById("grandparent").addEventListener("click", () => {
  console.log("Grandparent clicked");
});

🧪 Output when clicking child:

Child clicked - Stopping propagation

That’s it! The event does not bubble to parent or grandparent.

*🚦 Use stopPropagation() when:
*

You want to prevent accidental triggers on parent elements
You're handling modals, dropdowns, or stop-click-outside logic
You want full control over the event path

💡 Summary

Concept	Direction	Use Case
Bubbling	Child → Parent → Document	Efficient event delegation
Capturing	Document → Parent → Child	Early interception before the target
stopPropagation	Stops the event mid-flow	Avoid unwanted side-effects

🍭 Debouncing vs Throttling — Explained Through a Cute Story of a Daughter and Her Mother!

Akshay — Wed, 23 Apr 2025 10:41:51 +0000

Performance optimization is a key part of frontend development, especially when handling rapid user interactions like typing, scrolling, or button clicks. That’s where two powerful techniques come into play — Debouncing and Throttling.

But these words sound fancy, right?

So let me break them down for you in a simple story involving a little girl and her mom — a story you’ll never forget 😉

👧 Debouncing — “Ask only after you stop asking!”

🧠 Real-World Scenario:
Imagine a little girl (the user) wants a candy (API call), and she keeps bugging her mom (the system) every few seconds:

“Mom, can I have candy? Can I have candy? Can I have candy?”

Mom gets overwhelmed. So she says:

“Ask me only once after you’re done talking for 5 seconds!”

Now, every time the girl opens her mouth again, the 5-second timer resets.

Finally, when she stays quiet for 5 seconds, mom gives her the candy 🍬

That’s Debouncing!

🔁 It waits for the last request, and only proceeds after the user stops asking for a while.

💻 Debounce Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Debounce Example</title>
</head>
<body>

  <textarea id="myInput" onkeyup="betterFunction()"></textarea>

  <script>
    let count = 0;

    function getData() {
      console.log('Function called ' + count++);
    }

    const myDebounce = (fn, delay) => {
      let timer;
      return function(...args) {
        if (timer) clearTimeout(timer); // Clear previous request

        timer = setTimeout(() => {
          fn();
        }, delay); // Wait until user stops
      };
    };

    let betterFunction = myDebounce(getData, 1000);
  </script>
</body>
</html>

👧 Throttling — “You’ll get it, but only once in a while!”

Now let’s return to our girl and her candy.

This time, mom sets a rule:

“You’ll get only one candy every 10 minutes. Don’t keep asking!”

So if the girl asks at:

Minute 1 ❌ (Ignored)
Minute 3 ❌ (Ignored)
Minute 7 ❌ (Ignored)
Minute 10 ✅ (Gets candy!)

That’s Throttling!

🔁 It ensures that a function runs at most once in a specific time interval, even if it’s triggered many times.

💻 Throttle Polyfill Example

const myThrottle = (cb, delay) => {
  let last = 0;
  return (...args) => {
    let now = new Date().getTime();
    if (now - last < delay) return; // Ignore request if too soon
    last = now;
    return cb(...args);
  };
};

🔄 Debounce vs Throttle — In a Nutshell

Understanding State Updates in React with a Simple Marble Game.

Akshay — Sat, 19 Apr 2025 15:26:21 +0000

The Game Setup

Imagine you're playing a game where you have a bag of marbles. Each time it's your turn, you can add one more marble to your bag. Let's compare this to a React component where you have a state variable called slider, representing the number of marbles in your bag.

Scenario 1: Direct State Update

When you use the state update like setSlider(slider + 1), it’s similar to looking into your bag, counting the marbles you have, say five, and then deciding you will have six marbles next. You then pass this message along to a friend who is responsible for updating the marble count. If you repeat this command multiple times quickly, without waiting for confirmation from your friend, you always start from the last counted number, which was five. This means, even if you issue the update three times in a row, you might still end up thinking you should have six marbles because your friend didn’t have time to update the count between your commands.

Scenario 2: Functional State Update

On the other hand, using setSlider(slider => slider + 1) is like telling your friend, Please check how many marbles are currently in the bag and add one more. In this case, you don’t do the counting; your friend does. Your friend checks the current count right before adding a new marble, ensuring each addition is based on the most recent count.This method is particularly useful in React because it handles rapid or multiple state updates based on the most current state value. It ensures that every update is accurate, no matter how quickly they are fired off.

Why This Matters

In web development, especially when using React, components might update frequently, and state values can change rapidly. By using the functional update form slider => slider + 1, you ensure that each update is dependent on the most recent state. This is crucial for avoiding bugs where your UI might not reflect the correct state due to outdated values.

Conclusion

Understanding the difference between direct and functional state updates can greatly enhance your ability to manage state in React effectively. It helps prevent bugs and ensures that your application behaves as expected, even under rapid state changes. This simple marble game analogy helps illustrate why updating state functionally can be a better choice in many scenarios, ensuring your application remains robust and reliable.