How to watch changes in react.js?

Issue

In AngularJS, I watch change like this.

$scope.$watch("rateMode",
function (newVal, oldVal) {
if (newVal != oldVal && timeRange != "") {
  if (typeof $scope.onRateCallback != undefined) {
    $scope.onRateCallback($scope.chartDataObject, newVal);
  }
  updateChart(timeRange);
}
},
true
);

How can I do it in ReactJS?

Solution

For watching changes in React while component is rendering you can use useEffect hook

useEffect takes two arguments first is callback function and second is dependency array.

In callback function you write what you want to do whenever this useEffect runs. And in dependency array you pass state or props, and whenever the passed variables in the dependency array changes it runs the useEffect again.

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

function Example() {
  const [count, setCount] = useState(0);

  // Here, useEffect runs on first render and after whenever count is changed
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Answered By - Abhishek