Как исправить warning?

Question

[maestro07]

React Hook useEffect has a missing dependency: 'loadUsingHistory'. Either include it or remove the dependency array react-hooks/exhaustive-deps

useEffect(() => {
    loadUsingHistory();
  }, []);

  const loadUsingHistory = () => {
    if (id && !isNaN(+id)) {
      contract
        .getContractHistoryStatus(+id)
        .then((response) => {
          return response.data.map((item: any) => {
            return {
              ...item,
              key: item.id,
            };
          });
        })
        .then((response) => {
          setData(response);
        });
    }
  };

...
        <Button icon={<SyncOutlined />} onClick={loadUsingHistory}>
          Обновить
        </Button>

в моем компоненте, я хочу выгрузить список с помощью axios, и отрисовать его.
так же есть кнопка которая вызывает выгрузку.

Зачем добавлять в список зависимости если мне надо только в начале вызвать загрузку при маунте?

Comments

[Alexandroppolus]

что за id там используется?

[maestro07]

Alexandroppolus, c router
react-router-dom v6
const { id } = useParams();

[Alexandroppolus]

maestro07, ну то есть она может поменяться? и что тогда делать? вызывать useEffect заново?

а setData - это наверно из useState?

[maestro07]

Alexandroppolus, id может поменяться, если в url прописать и нажать enter, тогда же пойдет render. setData, да из useState. начальное значение пустой массив

Answer 1

[Alexandroppolus]

const loadUsingHistory = useCallback(() => {
    ...
}, [id, setData]);

useEffect(() => {
    loadUsingHistory();
}, [loadUsingHistory]);

Comments

[maestro07]

const loadUsingHistory = useCallback(() => {
    ...
}, [id, setData]);

это часть будет всегда срабатывать при изменении id?
а зачем тут setData? setData внутри же loadUsingHistory и тогда не будет бесконечный вызов?

[Alexandroppolus]

maestro07, если поменяется id, то useCallback вернёт новую функцию, и заново сработает эффект.

setData добавил, потому что он упоминается внутри loadUsingHistory, и его надо в массив зависимостей. Хотя вроде бы react-hooks/exhaustive-deps знает про функцию из useState и не будет придираться, если её не упомянуть, потому как она всегда одна и та же...