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: ``` ``` 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 `useEffect `hook 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 (

Counter: {counter}

); } 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.

shimritz

State Changes In React.js and Vue.js

Join Our Newsletter. No Spam, Only the good stuff.