为什么在不使用useEffect的情况下尝试从localStorage和API加载数据时，数据结果显示两次？

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 从localStorage加载数据
    const localStorageData = localStorage.getItem('myData');
    if (localStorageData) {
      setData(localStorageData);
    }

    // 从API加载数据
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(apiData => {
        setData(apiData);
        localStorage.setItem('myData', apiData);
      });
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  return (
    <div>
      {data ? (
        <p>{data}</p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default MyComponent;