useEffectってなんだ

はじめに

ふわっ認識していることを調べる。
useEffect編です。
React hookの一つで、レンダーで実行する必要がなくて別で動かしたい処理を書く所のイメージ。

useEffectとは

React hookの一つ。副作用がある可能性のある処理を受け入れます。useEffectはレンダーが画面に反映された後に動作されるため安全に処理できます。

使い方

useEffect(() => {
    console.log("run useEffect");
});

第2引数
第2引数を指定することで、指定した値？変数が変更される場合のみ実行されるようになります。

const [number, setNumber] = useState(0)

useEffect(() => {
  console.log("run useEffect");
}, [number]);

また第2引数に空配列を渡した場合は、初回レンダリング時のみ実行される形になる。

実行されるタイミング

• 第2引数未指定
  • useEffect(() = console.log('hello'))
  • レンダー後に毎回呼び出される
• 第2引数に変数
  • useEffect(() = console.log('hello'), [number])
  • number変更時に呼び出される
• 第2引数に空配列
  • useEffect(() = console.log('hello'), [])
  • 初回レンダー後のみ呼び出される

返り値(クリーンアップ)

返り値を指定することで、クリーンアップをすることができます。データフェッチやタイマーなどの変更や中断するために必要になってきます。

function App() {
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(1000);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((count) => count + 1);
    }, number);
    return () => {
      setCount(0);
      clearInterval(interval);
    };
  }, [number]);

  return (
    <div className="App">
      <h1>Learn useEffect</h1>
      <span>{count}</span>
      <br />
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(Number(e.target.value))}
      ></input>
    </div>
  );
}

export default App;

所感

クリーンアップの動作がふんわりしていたが、なんとなく掴めたのが大きい。
あとはuseMemoと同じく乱用するべきではなさそうな雰囲気を感じた。一通り試したあとに下の記事を読むと良さそう。

次に読むと良さそうなもの

参考