#author("2022-09-05T16:04:23+09:00","default:ryuichi","ryuichi")
#author("2022-09-05T16:08:15+09:00","default:ryuichi","ryuichi")
* 第2引数のReferential Equality(参照の等価性) [#od8e1f40]
** useEffectを使ったコード [#zfde0957]
import { useEffect, useMemo, useState } from "react";
function App() {
const [count, setCount] = useState(0);
const [x, setX] = useState({ name: "X" });
const y = { name: "Y" };
const z = useMemo(() => {
return { name: "Z" };
}, []);
useEffect(() => {
console.log("effect x");
}, [x]);
useEffect(() => {
console.log("effect y");
}, [y]);
useEffect(() => {
console.log("effect y");
}, [z]);
return (
<div className="App">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
</div>
);
}
export default App;
** useEffectの動作 [#ef85a9d7]
const [x, setX] = useState({ name: "X" });
const y = { name: "Y" };
const z = useMemo(() => {
return { name: "Z" };
}, []);
useEffect(() => {
console.log("effect x"); // 最初のマウントの時だけ実行される
console.log("effect x"); // 最初のマウントの時だけ実行される
}, [x]);
useEffect(() => {
console.log("effect y"); // Re-renderの度に実行される
console.log("effect y"); // Re-renderの度に実行される
}, [y]);
useEffect(() => {
console.log("effect y"); // 最初のマウントの時だけ実行される
console.log("effect z"); // 最初のマウントの時だけ実行される
}, [z]);
useEffect(() => {
console.log("effect y.name"); // 最初のマウントの時だけ実行される
}, [y.name]);