grafana/public/app/plugins/datasource/influxdb/components/useShadowedState.ts

import { useState, useEffect } from 'react';
import { usePrevious } from 'react-use';

export function useShadowedState<T>(outsideVal: T): [T, (newVal: T) => void] {
  const [currentVal, setCurrentVal] = useState(outsideVal);
  const prevOutsideVal = usePrevious(outsideVal);

  useEffect(() => {
    const isOutsideValChanged = prevOutsideVal !== outsideVal;
    // if the value changes from the outside, we accept it into the state
    // (we only set it if it is different from the current value)
    if (isOutsideValChanged && currentVal !== outsideVal) {
      setCurrentVal(outsideVal);
    }
  }, [outsideVal, currentVal, prevOutsideVal]);

  return [currentVal, setCurrentVal];
}