State Changes In React.js and Vue.js

Shimrit Breef Ziskand — Sat, 22 Jul 2023 11:34:06 +0000

Recently I have got a chance to work with Vue.js framework and found some familiar concepts between Vue and React.

Both frameworks provide reactive state management and while the concept is the same the semantics are quite different.

In React we would use useEffect hook while Vue provides us with watch directive.

Both of those (watch directive and useEffect) watch for changes made to internal component properties.
However, there are some key differences between those two.

It is good to remember that watch directive in not tied to component lifecycle unlike React's useEffect that is fully aware of component's lifecycle (mount, unmount, update)

The watch directive can only be used to watch for changes to properties, while useEffect can also be used to perform side effects, such as fetching data or updating the DOM.

Let’s learn about both by using a code example.

This is example of how watcher works in Vue.js:

<template>
  <div id="app">
    <p>Counter: {{ counter }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      counter: 0
    }
  },
  watch: {
    counter (newValue, oldValue) {
      console.log('Counter changed from', oldValue, 'to', newValue)
    }
  },
  methods: {
    increment () {
      this.counter++
    }
  }
}
</script>

This code will create a simple counter that will log a message to the console whenever the counter value changes. The watch directive is used to register a callback function that will be called whenever the counter property changes. The callback function will be passed two arguments: the new value of the property and the old value of the property.

The watch directive takes a property name as its argument, and then a callback function as its value. The callback function will be called whenever the property changes. In this case, the counter property is being watched, and the callback function will log a message to the console whenever the counter value changes.

In React, we use the built-in useEffecthook to watch for changes.

import React, { useState, useEffect } from "react";

function Counter() {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    console.log("Counter changed to", counter);
  }, [counter]);

  function increment() {
    setCounter(counter + 1);
  }

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

This code is very similar to the Vue.js example, but instead of using the watch directive, we are using the useEffect hook to watch for changes to the counter state variables.

The useEffect hook takes a callback function as its first argument. The callback function will be called whenever the component is mounted or whenever any of the dependencies change.
The dependencies (she second argument of the useEffect hook) can contain any value that can be compared with ===.
This includes primitives, objects, and functions (in our case it's a primitive (number) value ===> [counter]).

If you do not pass any dependencies to the useEffect hook, the hook will only be run once - on component mount.

In this case, the callback function logs a message to the console whenever the counter state variable changes.

In conclusion, I have introduced the similarities and differences between the useEffect hook in React and the watch directive in Vue.
I hope that this example has illustrated how both are useful and powerful tools.

DEV Community: Shimrit Breef Ziskand

State Changes In React.js and Vue.js