Правильный способ обновления реагирующего компонента из вторичного источника

Question

Я новичок в React Hooks и столкнулся с проблемой при создании компонента. Мое приложение имеет простую форму с несколькими полями и кнопкой «Рассчитать», которая получает информацию из API и отображает результаты в таблице. Приложение использует две валюты, их можно переключать с помощью пары кнопок. Я хочу обновить таблицу (заново извлечь данные) при смене валюты, но только если уже было что-то рассчитано с помощью основной кнопки «Рассчитать» перед изменением валюты. Мой компонент выглядит примерно так:

const ProductionCosts = () => {
  const [data, setData] = useState({}); 
  const [useXCurrency, setUseXCurrency] = useState(true);


  const calcCosts = useCallback(async () => {

    fetchCalcData(args);
  }, [args]);

  useEffect(() => {
    if (Object.keys(data).length > 0) //check data isn't empty, hence it was already calculated
      fetchCalcData();
  }, [useXCurrency]);



  return (
   ......

  );
};

Делает что-то похожее на описанное выше, но линтер скажет, что данные должны быть в списке зависимостей useEffect, но добавление приведет к al oop учитывая, что fetchCalcData изменяет данные и вызывает эффект, я действительно знаю, что предложения линтера не являются абсолютными, но в то же время я знаю, что должен быть лучший способ. Таким образом, помимо добавления логических флагов или чего-то подобного, есть лучший подход к этому делу?

Answer 1

Обычно вы хотите использовать референс с начальным значением и обновлять его в случае успеха, в следующий useEffect условие будет ложным:

const ProductionCosts = () => {
  const [data, setData] = useState({});

  const dataRef = useRef(data);

  useEffect(() => {
    if (Object.keys(dataRef.current).length > 0) {
      const data = // fetch your data
      dataRef.current = data;
    }
  }, [useXCurrency]);

  return <></>;
};