rendering前後によるObjectの比較 - mrsekut-p

rendering前後によるObjectの比較

depsの比較は===なので、これで確認できる

code:js

let prev = null;

function App() {

const n, setN = useState(0);

const cur = () => {}; // これを比較したいものに書き換える

console.log(cur === prev);

prev = cur;

return (

<div>

<div>{n}</div>

<button onClick={() => setN(n => n + 1)}>inc</button>

</div>

);

}

stateとbuttonは、手動で再renderingを引き起こすために用意しておくといい

https://codepen.io/mrsekut/pen/zYEVeaj?editors=0010

useStateのstateは、状態が変わらない限り同じ参照を持つこと

code:ts

const n2, setN2 = useState({a:2})

const cur = n2;

renderingのたびにobjectは再生成されること

code:ts

const cur = 1,2,3

code:ts

const cur = {};

code:ts

const cur = () => {}

などを確認できる