React hooks useEffect wouldn't stop fetching after adding empty dependency array

Question

I am using react hooks to fetch data but it doesn't seems to stop.

I've read the doc and it mentions that if adding [] as the second argument of useEffect, it will have zero dependency and thus be only called once. I've done this, but it doesn't change the situation and the fetching function is being called numerous times as it printed. Is it a bug?

useEffect(() => {
    props.fetchSounds();
  }, []);


export const fetchSounds = () => {
  console.log("I am being called");
  return dispatch => {
    fetch("http://localhost:4000/sounds")
      .then(response => response.json())
      .then(response => {
        dispatch({
          type: ActionTypes.FETCH_SOUNDS,
          payload: response.data
        });
      })
      .catch(err => console.error(err));
  };
};

Edit: The component is only used once.

Edit: I've tried various things with the hook dependency but none of them can stop the fetch function being called. Like

Let sound become the dependency:

  useEffect(() => {
    props.fetchSounds();
  }, [props.sounds]);

Let a dummy const be the dependency:

  const a = 5;

  useEffect(() => {
    props.fetchSounds();
  }, [a]);

Even without useEffect but just call

  props.fetchSounds()

inside the functional component for once. All of them turns out to be that the fetch function is being called numerous times.