Разбирая зависимости React Hooks (useEffect), предложение ESLint нарушает код

Question

Я перехожу с Python back- и front-end к Python REST api с фронтендом REACT. Чтобы проверить запросы API, я следую этому руководству. Теперь использование их кода работает и позволяет мне выполнять вызовы API, но ESLint выдает предупреждение ESLint: React Hook useEffect has missing dependencies: 'data', 'options.body', 'options.method', and 'options.query'. Either include them or remove the dependency array.. Автоматическое исправление просто включает эти переменные (хотя, как ни странно, параметры уже включены через jsonOptions).

Автоматическое исправление c нарушает код - экран остается на экране загрузки, что, кажется, происходит из-за бесконечных циклов. Я видел несколько других сообщений, в которых пользователи испытывали это, но обычно это было из-за функциональной зависимости, и я не уверен, присутствует ли это в моей проблеме.

Что мне нужно сделать, чтобы использовать правильные зависимости? Одна вещь, которая устраняет ошибку ESLint, - это ввод (data, options) в качестве входных данных для функции useEffect. В чем разница между вводом для useEffect и зависимостями?

Ниже приведен код, который я сейчас использую, который работает и дает ошибку ESLint.

  export default (url, options = { body: {}, query: {} }) => {
  // Initialize fetch data
  const [data, setData] = useState({
    response: null,
    error: false,
    loading: true,
  });

  // Extracting jsonOptions dependency so code can be checked more easily
  const jsonOptions = JSON.stringify(options);

  useEffect(() => {
    // Set the fetch data
    setData({ ...data, error: null, loading: true });
    // Execute json fetch asynchronously
    fetch(createUrl(url, options.query), {
      method: options.method || "GET",
      headers: {
        "Content-Type": "application/json",
      },
      body: options.method !== "GET" && JSON.stringify(options.body),
    })
      // As soon as we have a response
      .then(async response => {
        const data = await response.json();
        // Update fetch data
        setData({
          response: data,
          error: !response.ok,
          loading: false,
        })
      })
      // If any error is returned
      .catch(error => {
        //fetch throws an error only on network failure or if anything prevented the request from completing
        setData({
          response: { status: "network_failure" },
          error: true,
          loading: false,
        })
      })
  },  [url, jsonOptions]);
    //[url, jsonOptions, data, options.query, options.method, options.body]);
  // data, options.query, options.method, options.body not originally written, added because of ESlint

  return data
}