> [!caution]
> マウント、アンマウントという表現が適切かは疑問
[[useEffect]]を使う。
```tsx
import React from "react";
import { useState, useEffect } from "react";
interface ComponentProps {
value: string;
}
function Component({ value }: ComponentProps) {
useEffect(() => {
// マウントしたときの処理
console.log(`👺start: ${value}`);
return () => {
// アンマウントしたときの処理
console.log(`👺end: ${value}`);
};
}, []);
return <div style={{ color: "white" }}>{value}</div>;
}
export default function App() {
const [attached, setAttached] = useState<boolean>(false);
const handleAttach = () => {
setAttached(true);
};
const handleDetach = () => {
setAttached(false);
};
return (
<div>
{attached && <Component value="hogehoge" />}
<div style={{ display: "flex", justifyContent: "center", gap: "8px" }}>
<button onClick={handleAttach}>Attach</button>
<button onClick={handleDetach}>Detach</button>
</div>
</div>
);
}
```
> [!caution]
> [[useEffect]]の第2引数を指定しないと、すべての値が変更されたときに処理が実行されてしまって期待通りに動かない。必ず空配列を設定すること。
## 参考
- [React HooksのuseEffectパターン集 \- Qiita](https://qiita.com/shimarin/items/7b1e2ce8efc59d42f581)