Вызов API React Hooks - должен ли он быть внутри useEffect?

Question

Я изучаю React (с хуками) и хотел спросить, должен ли каждый отдельный вызов API быть внутри хука useEffect? ​​

В моем тестовом приложении у меня есть рабочий шаблон, который выглядит следующим образом : Я устанавливаю состояние, затем после нажатия кнопки запускаю функцию, которая отправляет запрос get в мой API, и в блоке .then добавляет полученные данные в состояние.

У меня также есть хук useEffect, который выполняется только при изменении указанного состояния (используя массив зависимостей со значением состояния) и устанавливает ДРУГОЙ фрагмент состояния, используя новые данные в предыдущем состоянии. Этот второй фрагмент состояния - это то, что мое приложение отображает в блоке рендеринга.

Таким образом, выборка данных на самом деле происходит в функции, выполняемой по нажатию кнопки, а не в самом useEffect. Кажется, он работает.

Это правильный шаблон? Заранее спасибо!

Редактировать: пример, эта функция запускается по нажатию кнопки

const addClock = timezone => {
    let duplicate = false;
    selectedTimezones.forEach(item => {
      if (item.timezone === timezone) {
        alert("Timezone already selected");
        duplicate = true;
        return;
      }
    });
    if (duplicate) {
      return;
    }
    let currentURL = `http://worldtimeapi.org/api/timezone/${timezone}`;
    fetch(currentURL)
      .then(blob=>blob.json())
      .then(data => {
        setSelectedTimezones(prevState => [...prevState, data]);
      }
        );
  }

Answer 1

Да, вы можете делать запросы API в обработчике событий, например onClick.

Чего вы не хотите делать, так это делать запрос непосредственно внутри вашего функционального компонента (так как он будет выполняться при каждом рендеринге) , Пока запрос находится внутри другой функции, и вы вызываете эту функцию только тогда, когда действительно хотите сделать запрос, проблем нет.

Answer 2

Да, вызовы apis, которые происходят при таком действии, как нажатие кнопки, не будут частью вызова useEffect. Это будет частью вашей функции обработчика событий.

Когда вы вызываете useEffect, вы говорите React запустить функцию «эффекта» после сброса изменений в DOM

* 1006. *useEffect содержит лог c, который мы хотели бы запустить после того, как React обновил DOM. Таким образом, по умолчанию useEffect запускается как после первого рендера, так и после каждого обновления.

Примечание : Вы всегда должны писать asyn c logi c внутри useEffect, если это не вызывается функцией обработчика событий.