React Hooks の使い方

「React Hooks」の使い方をまとめました。

1. React Hooks

Reactのコンポーネントには、「関数コンポーネント」と「クラスコンポーネント」の2種類がありますが、「状態管理」「ライフサイクル」などReactの機能が利用可能なのは「クラスコンポーネント」のみです。「React Hooks」を使うことで、「関数コンポーネント」でもReactの機能を使えるようになります。

フックの種類は、次のとおりです。

◎ 基本のフック
・useState
・useEffect
・useContext

◎ 追加のフック
・useReducer
・useCallback
・useMemo
・useRef
・useImperativeHandle
・useLayoutEffect
・useDebugValue

2. useState

「状態管理」を行うためのフックです。stateオブジェクトと同様の処理を行います。

useState()で、現在のstateの値と、更新関数を取得します。引数はstateの初期値を渡します。更新関数でstateを更新します。

const [state, setState] = useState(initialState);

useStateのサンプルは、次のとおりです。

import React, { useState } from 'react'

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(0)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

export default App;

3. useEffect

コンポーネントの描画直後に処理を実行するフックです。

useEffect()で、描画直後に実行する関数を指定します。第2引数に変数の配列を指定することで、任意の変数の変更時のみ関数を実行することができます。

useEffect(componentDidRender(), myFunc, [watchValue])

useStateのサンプルは、次のとおりです。

import React, { useEffect } from 'react'

function App() {
  // 描画直後に呼ばれる関数
  useEffect(() => {
    console.log('call useEffect')
  })

  // 描画時に呼ばれる関数
  const callRender = () => {
    console.log('call render')
  }

  // 描画
  return (
    <>
      <p>{callRender()}</p>
    </>
  )
}

export default App

4. useLayoutEffect

「useEffect」の亜種です。「useEffect」が「描画が完全終了した後」に実行されるのに対し、「useLayoutEffect」は「DOMに追加後のブラウザ表示する直前」に実行されます。

import React, { useLayoutEffect } from 'react'

function App() {
  // 描画直後に呼ばれる関数
  useLayoutEffect(() => {
    console.log('call useLayoutEffect')
  })

  // 描画時に呼ばれる関数
  const callRender = () => {
    console.log('call render')
  }

  // 描画
  return (
    <>
      <p>{callRender()}</p>
    </>
  )
}

export default App

5. useContext

「コンテクスト」にアクセスするためのフックです。コンテクストは明示的にプロパティを渡すことなく、コンポーネント間で値を共有する方法になります。

createContextで、コンテクストを生成します。

context = createContext(initialValue)

useContextで、コンテクスト値を取得します。

value = useContext(context)

<MyContext.Provider>のvalueでコンテクスト値を更新します。

<MyContext.Provider value={newValue}>
    :
</MyContext.Provider>

useContextのサンプルは、次のとおりです。

import React, { createContext, useContext } from 'react'

// コンテクストの生成
const MyContext = createContext({ score : 0})

function App() {
  return (
    // コンテクストの反映
    <MyContext.Provider value={{ score: 1000 }}>
      <Child />
    </MyContext.Provider>
  )
}

function Child() {
  return (
    <GrandChild />
  )
}

function GrandChild() {
  // コンテクストの現在値の取得
  const { score } = useContext(MyContext)
  return (
    <p>Score : {score}</p>
  );
}

export default App

6. useCallback

コールバック関数のキャッシュ(不変値化)を行うフックです。アロー式は常に新規関数を作ってしまいますが、useCallbackを使うことによって、同じ関数を使い回し、無駄な更新を防ぎます。

useCallback()は、初回だけ関数を生成し、2回目以降はキャッシュを返します。第2引数に変数の配列を指定することで、任意の変数の変更時に関数を実行して関数を更新することができます。

  callback = useCallback(() => {do_something}, [watchValue])

useCallbackのサンプルは、次のとおりです。

import React, { useCallback } from 'react'

function App() {
  // コールバックの取得
  const callback = useCallback(() => {return 1 + 1},[])
  return (
    <div>{callback()}</div>
  )
}

export default App

7. useMemo

重い関数の処理結果をキャッシュを行うフックです。

useMemo()は、初回だけ関数を実行し、2回目以降はキャッシュを返します。第2引数に変数の配列を指定することで、任意の変数の変更時に関数を実行して処理結果を更新することができます。

  value = useMemo(myFunc, [watchValue])

useMemoのサンプルは、次のとおりです。

import React, { useMemo } from 'react'

const expensiveFunc = () => {
  return 1 + 1
}

function App() {
  // メモの取得
  const value = useMemo(() => expensiveFunc())

  // 描画
  return (
    <div>{value}</div>
  )
}

export default App

8. React Hooks の注意点

「React Hooks」のフックは、関数コンポーネント内で、呼び出される順番と回数を、毎回同じにする必要があります。そのため、「関数コンポーネント」の最初に書き並べるのが良いとされています。