【React】useEffectが2回実行される問題を解決する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、ReactのHooksである useEffectが2回実行される問題を解決する方法について解説していきます。

1 useEffectが2回実行されるのは、なぜ？
2 index.js の StrictModeタグを消して解決する
3 Twitterやってます！Follow Me！
4 React関連の書籍
5 プログラミング学習・エンジニア転職関連の情報
6 最近の投稿

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();