不确定如何在浏览器中呈现useEffect的结果

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

function Counter() {
  const [count, setCount] = useState(0);

  // 使用 useEffect 监听 count 的变化
  useEffect(() => {
    console.log(`Count has changed to ${count}`);
  }, [count]); // 依赖数组中只有 count

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

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

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result); // 更新状态以触发重新渲染
    }

    fetchData();
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  return (
    <div>
      {data ? (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;