How to watch changes in react.js?-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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