React Hook延迟了useEffect触发？

useEffect(() => {
  // 副作用代码
}, [dependency1, dependency2]); // 确保这里的依赖是正确的

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch('url');
      const data = await response.json();
      // 处理数据
    } catch (error) {
      // 错误处理
    }
  };

  fetchData();
}, []); // 注意这里的依赖数组

const memoizedCallback = useCallback(() => {
  // 回调函数
}, [dependency]);

useEffect(() => {
  // 使用 memoizedCallback
}, [memoizedCallback]);

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

function ExampleComponent({ id }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true;

    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/data/${id}`);
        const result = await response.json();
        if (isMounted) {
          setData(result);
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();

    return () => {
      isMounted = false; // 清理函数，防止组件卸载后设置状态
    };
  }, [id]); // 仅在id变化时重新获取数据

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

export default ExampleComponent;