數值更新問題

當button點擊時count+1
把count數字增加內到array更新li列表

初次啟動時 useeffect 執行兩次
array 變成 [0,0,0] 導致生出三個li
但我的 dependencies [Count] 應該沒有變吧?
後面增加產生的數值列表是正常的
結果則是 [0,0,0,1,2,3,4,5]

我用另一個方法
直接宣告一個 Count 變數而不用 useState
在 onClick 內的 setList 把 Count++
但結果則是 [0,1,2,2,2,2,2]

重複渲染問題
當我新加元素到 Array 中
如果不想要舊元素 Item 重新渲染
是要在每個 Item 裡面還要有一個自己的狀態嗎?
比方說把 props.title 當作初值給 useState
只有在 Item 內 useEffect 的 [props.title]
更新後再重新 setState 更改 UI
這樣是可以的嗎?

export default function App() {
  // let Count = 0;
  let [Count, setCount] = useState(0);
  let [List, setList] = useState([Count]);

  useEffect(() => {
    setList((prevList) => {
      return [...prevList, Count];
    });
  }, [Count]);

  return (
    <div className="App">
      <button
        onClick={() => {
          setCount(Count + 1);
        }}
        
        // onClick={() => {
        //   setList((prevList) => {
        //     Count = Count + 1;
        //     return [...prevList, Count];
        //   });
        // }}
      >
        button
      </button>
      <ul>
        {List.map((val) => {
          return <Item title={val} />;
        })}
      </ul>
    </div>
  );
}
function Item(props) {
  return <li>{props.title}</li>;
}