React の useState フックの使い方を具体例をまじえて解説【 TypeScript 】

ショウヘイ

どうも、ノマドクリエイターのショウヘイ(@shohei_creator)です。

ふーちゃん

ブログアシスタントのふーちゃんです。

React は、仮想 DOM を利用した差分検知によって、コンポーネントをレンダリングしています。レンダリングが実行されると、対象のコンポーネントは再構成されるため、コンポーネント内の変数も初期化されます。何か対策しなければ、更新内容の状態を保持できません。

React で状態の保持をおこなうには、クラスコンポーネントを使う必要がありました。しかし、 useState というフックが登場したことで、関数コンポーネントでも状態の保持が可能になりました。

この記事では、 React の useState フックの構文と具体例について説明します。

目次

React の useState フックとは

React の useState フックは、再レンダリングされても、関数コンポーネントの state (変数の値)を保持しておけるフックです。

React によってコンポーネントが再レンダリングされると、コンポーネント内の変数は、初期値に戻されてしまいます。変数を保持しておきたい場合などは、クラスコンポーネントを使い、 state プロパティとして定義しておく必要がありました。

import React from "react";

type State = {
  firstName: string;
  lastName: string;
};

class UserName extends React.Component<{}, State> {
  constructor(props: {}) {
    super(props);

    // ここで変数を保持している
    this.state = {
      firstName: "太郎",
      lastName: "山田"
    };
  }

  changeName = (): void => {
    this.setState({
      firstName: "花子",
      lastName: "佐藤"
    });
  };

  render() {
    return (
      <>
        <p>
          私の苗字は{this.state.lastName}で、名前は{this.state.firstName}です。
        </p>
        <button onClick={this.changeName}>名前を変える</button>
      </>
    );
  }
}

export default UserName;

しかし、 useState フックが登場したことで、関数コンポーネントでも、 変数の状態を保持しておけるようになりました。クラスコンポーネントに比べて、より短く、より簡単にコードを書けます。

import React, { useState } from "react";

type State = {
  firstName: string;
  lastName: string;
};

export const UserName: React.VFC = () => {

 // ここで変数を保持している
  const [name, setName] = useState<State>({
    firstName: "太郎",
    lastName: "山田"
  });

  const changeName = (): void => {
    setName({ firstName: "花子", lastName: "佐藤" });
  };

  return (
    <>
      <p>
        私の苗字は{name.lastName}で、名前は{name.firstName}です。
      </p>
      <button onClick={changeName}>名前を変える</button>
    </>
  );
};
この記事を知り合いに共有する
URLをコピーする
URLをコピーしました!
目次
閉じる