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

これは

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

ガイドのリンク

ja.reactjs.org

副作用フックの利用法

副作用フックによって関数コンポーネント内で副作用を実行することができるようになる。
サンプル

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

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

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

このスニペットは前回の例に基づいて作っている。
データ取得、講読の設定、Reactコンポーネント内のDOMの手動での変更などは副作用に該当する。
副作用(side-effect)またはeffectと呼ぶことに慣れているかどうかはともかく、こういった機能を実装するのは
経験済だったりすることが多い。

Reactコンポーネントにおける副作用には2種類ある。

  • クリーンアップコードを必要としない

  • クリーンアップコードを必要とする

それぞれについては次回から見ていく。

今日はここまで。