初回ページ読み込み時に2回useEffectが発動している。
Q&A
Closed
解決したいこと
初回ページ読み込み時に2回useEffectが発動している。
reactで簡単なアプリを作って勉強しています。
useEffectでconsol.log("初めてのuseEffect")を出力しようとしています。
該当するソースコード
counter.js
import React, { useState, useEffect } from 'react'
const Counter = () => {
const [count, setCount] = useState(0); //countは状態、setCountは更新する関数、useStateの（）内は初期値
useEffect(() => {
console.log('useEffectが実行されました。');
},[count]);
return (
<button onClick={()=> {
setCount ((prevCount)=>prevCount + 1);
}}
>
{count}
</button>
)
}
export default Counter
App.js
import logo from './logo.svg';
import './App.css';
import Counter from './components/Counter';
import InputForm from './components/InputForm';
function App() {
return (
<div className="App">
<h2>#2 useEffect</h2>
<Counter />
</div>
);
}
export default App;
自分で試したこと
何か2回呼び出されるようなものがないか確認しました。
GPTに質問したが、コードに問題なく、1度だけ出力されるはずですと言われている。
0