When Vue's watch Made Me Think of React's useEffect

So I was just messing around with Vue, exploring how watch works. At first glance — smooth experience. No drama. Just tell Vue what to keep an eye on, and boom — it handles the rest. And then it hit me: “Arrey yaar, this feels just like React’s useEffect!” Same Thought, Different Syntax In React, we write something like: useEffect(() => { // Do something when value changes }, [value]); Clean. You change the value, and React runs that function. Now look at Vue’s watch: watch: { value(newVal, oldVal) { // Do something when value changes } } Almost the same logic. Just different clothes. React needs you to manage that dependency array — one tiny mistake, and you're debugging for hours. Vue? You just say, “Bhai, watch this value,” and done. Vue Does the Heavy Lifting What I love about Vue is that you don’t need to overthink. Just declare the thing you care about, and Vue handles the nitty-gritty behind the scenes. watch: { userId(newVal) { this.fetchUser(newVal); } } No stale closures. No mental gymnastics with dependency arrays. It just works. Like good chai — simple, warm, and no fuss. Deep Watching? Vue's Got Your Back React devs, you know the pain of tracking nested state. You either pull out lodash, or do a JSON.stringify() dance.

Apr 17, 2025 - 14:26

When Vue's watch Made Me Think of React's useEffect

So I was just messing around with Vue, exploring how watch works.

At first glance — smooth experience. No drama.

Just tell Vue what to keep an eye on, and boom — it handles the rest.

And then it hit me:

“Arrey yaar, this feels just like React’s useEffect!”

Same Thought, Different Syntax

In React, we write something like:

useEffect(() => {
  // Do something when value changes
}, [value]);

Clean. You change the value, and React runs that function.

Now look at Vue’s watch:

watch: {
  value(newVal, oldVal) {
    // Do something when value changes
  }
}

Almost the same logic. Just different clothes.

React needs you to manage that dependency array — one tiny mistake, and you're debugging for hours.

Vue? You just say, “Bhai, watch this value,” and done.

Vue Does the Heavy Lifting

What I love about Vue is that you don’t need to overthink.

Just declare the thing you care about, and Vue handles the nitty-gritty behind the scenes.

watch: {
  userId(newVal) {
    this.fetchUser(newVal);
  }
}

No stale closures. No mental gymnastics with dependency arrays.

It just works. Like good chai — simple, warm, and no fuss.

Deep Watching? Vue's Got Your Back

React devs, you know the pain of tracking nested state.

You either pull out lodash, or do a JSON.stringify() dance.