useCallbackとuseEffectの第二引数について

koma0504 · Jun 17, 2021 · c1e2c9b · c1e2c9b · vercel · Jun 17, 2021
1 parent 2b056de
commit c1e2c9b
Showing 1 changed file with 13 additions and 10 deletions.
diff --git a/pages/index.jsx b/pages/index.jsx
@@ -9,16 +9,19 @@ import { useState } from "react";
 
 export default function Home({ blog }) {
 	const [count, setCount] = useState(1);
-	const hendleClick = (e) => {
-		setCount((count) => count + 1);
-	};
-	console.log("count", count);
-	// useEffect(() => {
-	// 	console.log("マウント時");
-	// 	return () => {
-	// 		console.log("アンマウント時");
-	// 	};
-	// }, []);
+	const hendleClick = useCallback(() => {
+		console.log(count);
+		if (count < 10) {
+			setCount((count) => count + 1);
+		}
+	}, [count]);
+
+	useEffect(() => {
+		console.log("マウント時");
+		return () => {
+			console.log("アンマウント時");
+		};
+	}, [count]);
 	return (
 		<div className="body">
 			<Header title="RATIO OBSERVER" layout="swiper" />