🌑

【useState】React hookが便利すぎる

3 min read

React hookとは..?

React hookはReact16.8から追加された機能で、クラスコンポーネントでしか使用できなかったstateなどのReactの機能を関数コンポーネントで使用できる機能です。
公式ページは以下です。

https://ja.reactjs.org/docs/hooks-intro.html

React hookのAPIについて紹介していこうと思います。
他のReact hookに関するAPIについても解説していますので、そちらもご覧ください。

useStateとは...?

useState()は関数コンポーネントでstateを管理するための機能です。ここで管理とは、保持と更新を指します。初回のレンダー時に返される'state'はuseStateに第一引数に指定した値になります。

使い方

  • const [state, stateを更新する関数] = useState(初期値);のように宣言します。
  • stateを更新する関数をラップした関数(例:updateFunction)を宣言します。
  • 変数名、関数名は任意で定義できます。
const [state, stateを更新する関数] = useState(初期値);

const updateFunction = () => {
    stateを更新する関数(stateの演算など);
};

実際にコードで書いてみました。例として、数字をカウントするカウンターコンポーネントを作ってみました。

Counter.jsx
// 関数コンポーネントで「useState」を使用するためにインポートする。
import React, { useState } from 'react';
import '../style.css';

const Counter = () => {
    // coutner:stateを宣言する。
    // setCoutner:stateを更新する関数を宣言する。
    // useStateの引数はcoutnerの初期値を指定する。
    const [counter, setCounter] = useState(0);

    // counterを+1する関数を定義する。
    const countUp = () => {
        setCounter(counter + 1);
    };

    // counterを-1する関数を定義する。
    const countDown = () => {
        setCounter(counter - 1);
    };

    // boolも使用可能。
    const [isVisible, setVisibility] = useState(true);

    // isVisibleを反転する関数を定義する。
    const updateVisibility = () => {
        setVisibility(!isVisible);
    };

    return (
        <>
            <button onClick={updateVisibility}>
                {isVisible ? '非表示にする' : '表示する'}
            </button>
            <div className={isVisible ? 'visible' : 'invisible'}>
                <p>現在の数値は{counter}です。</p>
                <button onClick={countUp}>+1</button>
                <button onClick={countDown}>-1</button>
            </div>
            <div className='line'></div>
        </>
    )
}

export default Counter
App.jsx
import React from 'react';
import { Counter } from './components/index';

function App() {
  return (
    <div>
      <p>useStateのサンプルです</p>
      <Counter />
    </div>
  );
}

export default App;

以下のように動作します。

再レンダリング後は、stateの更新関数によって更新されたstateの値を保持することになります。

まとめ

今回の記事ではuseStateを紹介しました。次回はuseEffectを紹介しようと思います。
githubにサンプルコードを載せていますので、気になった方はご覧ください。

https://github.com/Tomoki-webpro/react-hooks-study

参考記事

https://ja.reactjs.org/docs/hooks-reference.html#usestate

https://qiita.com/seira/items/f063e262b1d57d7e78b4

Discussion

ログインするとコメントできます