React Hooks API call - does it have to be inside useEffect?

Question

I'm learning React (with hooks) and wanted to ask if every single API call we make has to be inside the useEffect hook?

In my test app I have a working pattern that goes like this: I set the state, then after a button click I run a function that sends a get request to my API and in the.then block appends the received data to the state.

I also have a useEffect hook that runs only when the said state changes (using a dependency array with the state value) and it sets ANOTHER piece of state using the new data in the previous state. That second piece of state is what my app renders in the render block.

This way my data fetching actually takes place in a function run on a button click and not in the useEffect itself. It seems to be working.

Is this a valid pattern? Thanks in advance!

Edit: example, this is the function run on the click of the button

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

Yes, apis calls that happen on an action like button click will not be part of useEffect call. It will be part of your event handler function.

When you call useEffect, you're telling React to run your “effect” function after flushing changes to the DOM

useEffect contains logic which we would like to run after React has updated the DOM. So, by default useEffect runs both after the first render and after every update.

Note : You should always write async logic inside useEffect if it is not invoked by an event handler function.

Answer 2

Yes, you can make api requests in an event handler such as onClick.

What you don't want to do is make a request directly inside your functional component (since it will run on every render). As long as the request is inside another function and you only call that function when you actually want to make a request, there is no problem.