Two useEffect vs two API calls inside one useEffect

Question

When component mounts I need to get data from two API endponints. For now I have:

  useEffect(() => {
    dispatch(loadSomeDataOne());
  }, [dispatch]);

  useEffect(() => {
    dispatch(loadSomeDataTwo());
  }, [dispatch]);

I was thinking to do it within one useEffect:

  useEffect(() => {
    dispatch(loadSomeDataOne());
    dispatch(loadSomeDataTwo());
  }, [dispatch]);

Is there some difference between these two solutions? Which one's better?

Answer 1

Nope. using multiple useEffect is mostly for subscribing the side effects to different variable updates. For example you might have:

  useEffect(() => {
    dispatch(loadSomeDataOne(varA));
  }, [varA]);

  useEffect(() => {
    dispatch(loadSomeDataTwo(varB));
  }, [varB]);

This way, only the desired useEffect executes when either varA or varB is updated. If you want everything to run at the same time, then you just need 1 useEffect.