React Hooksとは？〜簡単な使い方とよく使う便利なHooksご紹介〜

今回の記事はReact Hooksとは何かについて、簡単な使い方や便利なHooksについてご紹介する記事です。初心者にも分かりやすいように記載していくのでReactに入門していこうと考えている方は是非参考にしてみて下さい。

React Hooksとは？
React Hooksの使い方
よく使う便利なHooks

React Hooksとは？

プロジェクトにおいて状態管理、主にページ内の表示変更などをクラスを書かずに管理できる機能が「React Hooks（リアクトフックス）」です。フックとは関数のことを著しており、React16.8で追加された便利な機能です。

React Hooksの登場前、Reactにはクラスコンポーネントベースと関数コンポーネントベースの二つの書き方があります。

クラスコンポーネント：状態管理やライフサイクルの機能あり
関数コンポーネントベース：状態管理やライフサイクルの機能なし

これがHooksの登場で関数コンポーネントでも状態管理やライフサイクル機能がほぼ使えるようになりました。

これによりクラスコンポーネントベースで記述するのが一般的だったReactも関数コンポーネントベースでき記述できるようになりました。

Reactのクラスコンポーネントでの書き方は複雑です。そのため、Hooksを用いることでこの課題を克服することができました。

書き方も簡素になります。（下記）

import React from 'react'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
  }

  render() {
    return (
      <>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </>
    )
  }
}

export default App

import React, { useState } from 'react'

const App = () => {
  const [count, setCount] = useState(0)

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

export default App

Hooksを利用した関数コンポーネントでは記述が簡素となりみやすいので新規でプロジェクトを立ち上げる際はReact Hooksを導入し、関数コンポーネントベースで開発を進めるべきです。

また、React Hooksにはユーザが自身でHooksを作成できる点があり、それをカスタムHooksと言います。カスタムHooksの作り方などに関しては別途記事を作成していきます。

では次にReact Hooksの基本Hooksの種類や使い方をご紹介していきます。

React Hooksの使い方

React Hooksの基本的な種類は下記です。

usestate
useeffect
usecontext
usereducer
usecallback
usememo
useref

また、ここからはReactのプロジェクトを立ち上げてみて言った方が分かり安いかもしれませんので下記記事を参考にReactプロジェクトを立ち上げてみても良いかもしれません。

「TypeScriptベースのReactプロジェクト始め方」

では、順番に見ていきます。

usestateの使い方

簡単にいうと状態管理を行うReact Hookです。下記のように定義します。

const [sampleCount,setSampleCount] = useState<string>("初期値")

「src/App.tsx」を下記のように書き換えます。

import React, { useState } from 'react';
import './App.css';

function App() {
  // サンプルUseState
  const [sampleCount,setSampleCount] = useState<string>("クリックしてません。");
  
  // クリックアクション
  const AddCount = () => {
    setSampleCount("クリックしました。")
  }

  return (
    <div className="App" >
      <label>表示：{sampleCount}</label>
      <button onClick={() => AddCount()}>ボタン</button>
    </div>
  );
}

export default App;

ボタンを押すとStateにsetStateで文字列をセットし、画面に表示する際にStateから取り出しています。

より詳細な解説は下記リンクから確認できます。

「【React/TypeScript】React Hooksとは？使い方をご紹介。」

useeffectの使い方

簡単にいうと状態が変わったことを検知し、処理を行うことができるメソッドです。

// 例えば画面初期表示次のみに実行したい処理
useEffect(()=>{
    console.log('初回ページレンダリング')
  },[])

// 変数xの値が変化したときに実行したい処理
useEffect(()=>{
    console.log('xの値が変更されました。')
  },[x])

// 基本的に第二引数のかっこ[]の中に状態を感知させたい要素を入れれば完成です。

もちろん複数のuseEffectを一つのコンポーネント内に配備することも可能ですので、コンポーネント内の柔軟な対応ができます。実際に使用したコードは下記です。

import React, { useEffect, useState } from 'react';
import './App.css';

function App() {
  // サンプルUseState
  const [effectFlag,setEffectFlag] = useState<boolean>(false);
  
  // クリックアクション
  const EffectChange = () => {
    if (effectFlag === true) {
      setEffectFlag(false)
    } else {
      setEffectFlag(true)
    }
  }

  useEffect(()=>{
    console.log('初回ページレンダリング')
  },[])

  useEffect(()=>{
    console.log(`effectFlagの変更${effectFlag}`)
  },[effectFlag])

  return (
    <div className="App" >
      <button onClick={() => EffectChange()}>ボタン</button>
    </div>
  );
}

export default App;

初回レンダリング次は下記のようなコンソールが出力されます。

初回ページレンダリングはページが開かれたタイミングでしかコンソールに出力されません。また、setStateの初期値を設定しているのでそのセット次にstateの値が更新されることによってuseEffect内の処理が起動されます。

usecontextの使い方

記載中

usereducerの使い方

記載中

usecallbackの使い方

記載中

usememoの使い方

記載中

userefの使い方

記載中

よく使う便利なHooks

基本的には「useState」「useEffect」は頻出で知っておく必要があると思います。それ以外はこの二つのHooksの使い方がわかってきた段階でも遅くはないと思います。

また、useStateで状態管理するのは良いのですが、例えばuseStateでオブジェクトを持った場合にレンダリングの制御が難しくなります。この辺りは下記で詳しく述べます。

「useStateで管理するオブジェクトのレンダリングを制御を行う方法。」

解決として「Store」管理と「React Hook Form」という技術の利用を提案します。

どちらも便利なライブラリなので使い方を別記事で解説していきます。是非興味あれば参考にしてみて下さい。

では今回の記事は以上です。React初心者用記事を多数記載しているのでTypeScriptのカテゴリからサイト内みていって下さい。