React Hooksの使い方のサンプル

2022年9月23日

React Hooks　とは？

React Hooksとは、関数コンポーネント内で、状態管理やライフサイクルを操作するために、Reactが提供している機能群のことです。

フック？と聞くとピンと来ないので、単純に関数コンポーネントが使用できるReactの機能と考えれば良いです。

※React Hooksは、React 16.8.0以上、React Native 0.59以上で使用できます。

useState 状態管理

useStateはシンプルな状態管理を行います。

下記コードはuseStateを用いたカウンターのサンプルです。

import { useState } from "react";

type CounterProps = {
  initialValue: number;
};

const Counter = (props: CounterProps) => {
  const { initialValue } = props;
  const [count, setCount] = useState(initialValue);

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

export default Counter;