How to listen for when a variable changes?

Grafana Plugin Development
,
17

You can use useEffect to watch the variable for changes, assign it to a state with useState, then use the state in your render.

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

const [dashboardVariableICareAbout, setDashboardVariableICareAbout] = useState("");

useEffect(() => {    
   setDashboardVariableICareAbout(replaceVariables('$dashboardVariableICareAbout'));
  },[replaceVariables('$dashboardVariableICareAbout')]);

return (
    <div>
      {dashboardVariableICareAbout}
    </div>
  );