【React】useState と useEffect

React Hooks: useState と useEffect の使い方

React Hooksは、React 16.8で導入され、関数コンポーネント内で状態やライフサイクルメソッドを利用できるようにします。useStateは状態を管理し、useEffectはライフサイクルメソッドの代替として使用されます。以下でそれぞれの基本的な使い方を紹介します。

1. useStateの基本的な使い方

useStateは関数コンポーネント内で状態を管理するために使用されます。状態変数とその更新関数が返され、コンポーネントの再レンダリングがこれらの変数によってトリガーされます。

import React, { useState } from 'react';

const Counter = () => {
  // 初期状態と更新関数を取得
  const [count, setCount] = useState(0);
  // const [count, setCount] = useState<number>(0); // typescriptのとき

  const increment = () => {
    // 状態の更新
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

useStateは、状態の初期値を引数として受け取り、現在の状態とその状態を更新するための関数を返します。

2. useEffectの基本的な使い方

useEffectは副作用を実行するために使用され、コンポーネントがマウントされた時、更新された時、あるいはアンマウントされた時に実行されるコードを記述することができます。

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

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  // useEffectを使用してカウンターが更新されるたびに処理を実行
  useEffect(() => {
    // 1秒ごとにカウントアップする処理
    const intervalId = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000); // 1000msのインターバル

    // コンポーネントがアンマウントされたときにクリーンアップ
    return () => clearInterval(intervalId);
  }, []); // 依存配列が空なので、コンポーネントがマウントされたときに1度だけ実行

  return (
    <div>
      <p>Elapsed Time: {seconds} seconds</p>
    </div>
  );
};

export default Timer;

useEffectの第二引数として依存配列を渡すことで、その依存が変更されたときだけuseEffectが実行されるように制御できます。空の配列を渡すと、マウント時の一度だけ実行されます。

空の配列ではない時の例

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

const ExampleComponent = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  useEffect(() => {
    // countの値が変更されたときに実行
    console.log(`Count is ${count}`);
  }, [count]); // countが変更されたときのみ実行

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default ExampleComponent;

これで、useStateとuseEffectの基本的な使い方について理解できました。これらのHooksはReactコンポーネントをよりシンプルかつ効果的に構築するための強力なツールです。

この記事では、初心者大学生がReact Nextを理解するためのアウトプット資料です。
間違いや意見などコメントお待ちしております！