JavaScript/React/useEffect/第2引数のReferential Equality（参照の等価性）の変更点

追加された行はこの色です。
削除された行はこの色です。
JavaScript/React/useEffect/第2引数のReferential Equality（参照の等価性）へ行く。
JavaScript/React/useEffect/第2引数のReferential Equality（参照の等価性）の差分を削除

#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]);