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?

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?

• javascript
• reactjs
• angularjs

• Can you elaborate more ? – Aman Sadhwani Commented Jun 14, 2022 at 4:41
• 1 useEffect hook in React can be used to watch a state variable. – subodhkalika Commented Jun 14, 2022 at 4:42

2 Answers 2

For watching changes in React while ponent 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>
  );
}

From the question it looks like you need to update the ui as per changes in the code. Please try using a useState in React.

const [rateMode, setRateMode] = useState();

and use the rateMode variable for rendering. When the setRateMode is called and rate mode gets updated the UI will render the changes.

if You have a variable or useState and want to watch that please use

useEffect hook