How to remove the repeated useEffect request?

Question

React

Good afternoon!
I'm a beginner, I'm having a problem re-requesting useEffect.
When the server data is loaded for the first time, the hook returns an empty array, then immediately returns the data, I think because of this, map gives undefined. How can I make it so that an empty array is not returned?

import Weathers from './Weathers'
import { useDispatch, useSelector } from 'react-redux'
import { useEffect } from 'react'
import { loadWeather } from '../redux/action'

function App() {
  const dispatch = useDispatch();
  const loading = useSelector(state => state.weather.loading);

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

  
  
  if (loading) {
    return (
      <div>
        <h1>loading...</h1>
      </div>
    )
  }
  return (
    <div className="App">
      <Weathers />
    </div>
  );
}

export default App;

Answer 1

How can I make it so that an empty array is not returned?

no way, the server needs time to pull the data, so your array is empty at the time of the request