How to fix warning?

Question

React

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>

in my component, I want to dump the list using axios and render it.
there is also a button that causes unloading.

Why add dependencies to the list if I only need to call load on mount at the beginning?

Answer 1

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

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