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