確認環境
$ npm list --depth=0 | grep react
my-app@0.1.0 /Users/xxxxx/projects/playground/react/my-app
├── @testing-library/react@13.3.0
├── react@18.2.0
├── react-dom@18.2.0
├── react-scripts@5.0.1StrictMode をオフにして検証します。
検証用コード
src/App.js
import { useEffect, useState } from 'react';
export default function App() {
const [display, setDisplay] = useState(true);
return (
<>
{display ? <Hoge /> : <p>HIDDEN</p>}
<button onClick={() => setDisplay((state) => !state)}>Button</button>
</>
);
}
const Hoge = () => {
useEffect(() => {
console.log('Hoge mount');
const id = window.setInterval(() => {
console.log('inner interval block');
}, 3000);
return () => {
console.log('Hoge cleanup');
clearInterval(id);
};
}, []);
console.log('Hoge rendered');
return <p>Hoge component</p>;
};結果: リロード直後
※ 2 は inner interval block が実行された回数です。
Hoge rendered
Hoge mount
2 inner interval block結果: ボタンを押す (1回目)
Hogeコンポーネントを非表示にします。
Hoge cleanup結果: ボタンを押す (2回目)
Hogeコンポーネントを表示にします。
※ 5 は inner interval block が実行された回数です。
Hoge rendered
Hoge mount
5 inner interval block