Могу ли я вызвать отдельную функцию в useEffect?

Question

Можно ли вызвать другую отдельную функцию в useEffect?

Я вызываю другую функцию в iuseEffect, но после сохранения файла она автоматически добавляет эту функцию в параметры массива useEffect.

см. Код ниже для правильного понимания.

перед сохранением файла:

  useEffect(() => {
    getData()
    console.log("useEffect ran...");
  }, [query]);

  function getData() {
    fetch(`https://jsonplaceholder.typicode.com/${query}`)
    .then(response => response.json())
    .then(json => setData(json));
  }

после сохранения файла:

  useEffect(() => {
    getData();
    console.log("useEffect ran...");
  }, [getData, query]);

  function getData() {
    fetch(`https://jsonplaceholder.typicode.com/${query}`)
      .then(response => response.json())
      .then(json => setData(json));
  }

он работает снова и снова.

Answer 1

Если вы переместите свою функцию getData в useEffect, вам не нужно будет включать ее в качестве зависимости, и useEffect будет работать только при изменении query.

Answer 2

Поскольку вы объявляете функцию getData внутри компонента React, она будет воссоздана при каждом рендеринге, и, следовательно, зависимости вашего эффекта меняются при каждом рендере. Это причина, по которой эффект выполняется на каждом рендере.

Чтобы предотвратить это, вы должны объявить функцию getData вне компонента, а затем передать запрос. Вот так:

function getData(query) {
  return fetch(`https://jsonplaceholder.typicode.com/${query}`)
    .then(response => response.json());
}

function YouComponent({ query }) {
  ...
  useEffect(() => {
    getData(query).then(setData);
    console.log("useEffect ran...");
  }, [query]);

  ...

P.S: Я не уверен, будет ли плагин eslint автоматически добавлять getData к зависимостям при этом, но даже если это так, это не повредит.