state参照の際にuseEffectを用いるべきどうか

Question

今までstateの更新はせず参照のみを行うような処理が合った場合、↓のようなコードを記述してきたのですが

import { useEffect, useState } from "react";

export default function App() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    console.log("in useEffect", value);
  }, [value]);

  return (
    <div className="App">
      <button onClick={() => setValue(value + 1)}>increment</button>
    </div>
  );
}

↓のようなコードを見かけ、stateの更新は行っていないので再レンダリングは発生しないわけでまどろっこしいことをしたくないのだな。程度に受け止めたのですがあまり見かけることがなくなんとなく引っかかってしまいます。

import { useEffect, useState } from "react";

export default function App() {
  const [value, setValue] = useState(0);

　console.log(value);

  return (
    <div className="App">
      <button onClick={() => setValue(value + 1)}>increment</button>
    </div>
  );
}

state参照に依存した処理のコストが高ければもちろんuseEffectで囲うべきと考えています、が実際これらで不必要に処理が走る以外の懸念点など合ったりしますでしょうか？

Answer 1

掲載のコードであれば「不必要に処理が走る」懸念すらありません。

• 掲載のコードに限って言えばuseEffectを使用する場合と結果に差がない
• console.log()は基本的にデバッグ目的のログ出力なのでその目的に適応していれば問題はない

大きな違いは、処理が走るのがレンダリング前かレンダリング後かという点です。

コンポーネント直下の処理は、stateが更新されていてもそれに伴う画面のレンダリングが行われる前に実行されます。
useEffectは必ずレンダリングが行われた後に実行されます。

それも踏まえて今回の内容であれば影響はありません。
当然、stateが複数存在する場合には該当のstateが更新されたときだけ出力したほうが便利なのは言うまでもありません。

Comments

[tomagurosu]

回答ありがとうございます。

```
大きな違いは、処理が走るのがレンダリング前かレンダリング後かという点です。
```

こちらで疑問が完全に消化できました!