Reactガイドを読んでいくその251

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

クリーンアップを必要としない副作用

ReactがDOMを更新したあとで追加のコードを実行したいという場合があるので例を見ていく。

フックを使った例

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffectはレンダー後に何か処理をすることをReactに知らせる。
Reactは渡された関数を覚えていて、それを実行するようになっている。
useEffectがコンポーネント内で呼ばれるのは、useEffectを記述することで副作用ないからstatemであるcountにアクセスできるようになる。

useEffectは毎回レンダーの後に呼ばれる。
毎回呼ばれるのが嫌な場合どうするんだろう....。

明日はクリーンアップを有する副作用をみていく。

今日はここまで。