🥱

useEffectの第二配列の中身が変わったらって具体的にどういうこと?

2022/02/01に公開約700字

はじめに

React を学習する上で useEffect は避けては通れない道だと思いますが、実際に useEffect 更新時って何をしているか気になったのでこの記事を書いています。

本題

useEffectの第二引数の説明でよく依存配列の中身が変更されたらと記述されますが、変更されたらってどういう時なんでしょう?公式 Docにも同じような記述があります。

では、React の中身をのぞいてみましょう。
useEffectの中身を辿っていくと、ここに辿り着きました。

以下内容抜粋

基本的には===での比較ですが、+0-0は区別され、Number.NaNNaNは同値のようです。

function is(x: any, y: any) {
  return (
    (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) // eslint-disable-line no-self-compare
  );
}

このことが頭に入っていると、今後useEffectを扱う際にさらに理解が深まりそうです。

GitHubで編集を提案

Discussion

ログインするとコメントできます