こんにちはフロントエンドエンジニアのまさにょんです!
今回は、ReactのHooksである useEffectが2回実行される問題を解決する方法について解説していきます。
目次
useEffectが2回実行されるのは、なぜ?
React18 から、StrictModeが有効な場合は、コンポーネントが2回レンダリングされるようになっており、
その影響で useEffect が 2回実行されてしまいます。
index.js の StrictModeタグを消して解決する
index.js の StrictModeタグを消すことで、この問題は解決するので、< React.StrictMode >
タグを消して、
< div >
タグなどにしましょう。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './components/App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
</BrowserRouter>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
Twitterやってます!Follow Me!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!
React関連の書籍
プログラミング学習・エンジニア転職関連の情報
自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)
![](https://www15.a8.net/0.gif?a8mat=3NNG1X+D8W8C2+3GWO+6O1Z5)
『GEEK JOBキャンプ』スピード転職コース(無料)
![](https://www13.a8.net/0.gif?a8mat=3NNG1X+DAOJ5E+40C4+5ZMCH)
【IT道場】入校時0円! 就職目的プログラミングスクール
![](https://www14.a8.net/0.gif?a8mat=3NNG1X+DML78Y+53W0+609HT)
エンジニア転職なら100%「自社開発」求人に強い【クラウドリンク】
![](https://www14.a8.net/0.gif?a8mat=3NNGTV+ACPDGY+4VYG+60H7L)
『techgym』 (Python特化・無料)
![](https://www14.a8.net/0.gif?a8mat=3NNG1X+C2MGDU+4PGA+BY641)