5分で読むReact豆知識 | 入門 | 第6回: 代表的なHooks

はじめに

このシリーズは、Reactの公式ページなどから特に重要と感じたトピックを選び出し、何度でも読み返せるよう簡潔にまとめたものです。

進捗管理には「いいね」か「ブックマーク」がお勧め
さらに僕のモチベーションアップになります！よろしくお願いいたします！

シリーズ一覧はこちら

Hooksとは

React 16.8以降で導入された新機能であり、関数コンポーネント内でクラスコンポーネントの多くの機能（状態の保持、ライフサイクルイベントへのアクセス）を使用できるようにしたものです。

１.useState

stateとその更新関数を提供するHookです。
プリミティブ値やオブジェクト/配列などを格納できます。
stateはレンダリング間で保持されます。
更新関数を使用してstateを更新するとコンポーネントが再レンダリングされます。

const [count,setCount] = useState(0);

２.useEffect

React外の処理を行いたい場合に利用されるHookで、副作用を管理します。

・依存配列あり: 配列内の値が変更された場合、副作用が実行されます。
・依存配列が空: コンポーネントの初期レンダリング時にのみ副作用が実行されます。
・依存配列なし: すべてのレンダリング後に副作用が実行されます。

useEffect(() => {
  // API呼び出し、イベントリスナーの登録/解除など
}, [trigger]);

３.useRef

レンダリング間で値を保持したいが、再レンダリングのトリガーにさせたくない値に対して使用します。

const renderCount = useRef(0);

４.useCallback

依存する値が更新された場合にのみ、関数を再生成します。
通常、propsとして関数を渡す場合にmemoと併用されます。

const callBack = useCallback(()=>{
    //triggerを使った処理
}, [trigger])

memo

propsで渡される値や参照をキャッシュします。
propsに変更がない限り、親コンポーネントの再レンダリングが子コンポーネントに影響を与えません。

const Hello = memo(({ name }) => {
return (
    <h1>
        Hello {name}
    </h1>
)})

5.useMemo

関数の計算結果をキャッシュすることで、計算コストの高い処理を効率化します。

const [count, setCount] = useState(0);
const result = useMemo(() => double(count), [count]);

6.useReducer

より複雑な状態ロジックを管理するためのHookで、useStateよりも詳細な制御が可能です。

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
  }
  throw Error('Unknown action: ' + action.type);
}

const [state, dispatch] = useReducer(reducer, initialState);

7.useContext

contextを参照するために使用します。

7-1.contextとは

ツリー構造単位でstateをグローバル化します。
contextを使用すると処理が複雑になることもあるため、propsやchildrenとしてJSXを渡す方法を優先的に考えましょう。

コンポーネントツリー全体でデータをグローバルに利用できるようになります。
大規模なアプリケーションにおいては、コンポーネント間でのデータの受け渡しが複雑になる可能性があります。そのため、可能な限りPropsやChildrenを通じてデータを渡す方法を優先的に検討することが推奨されます。

7-2.contextの使用手順

1：Contextの作成

データが必要とされる最も上位のコンポーネントで初期化します。
階層ごとに異なる値を提供したい場合は、providerを使用し値を再定義します。
providerを使用しない場合は、デフォルト値が使用されます。

import { createContext } from 'react';
export const LevelContext = createContext(1);

2：Contextの利用

使用したいコンポーネント内でuseContextを呼び出し、Contextから値を取得します。
取得できる値は、そのコンポーネントに最も近いProviderから提供される値、またはデフォルト値です。

import { useContext } from 'react';
import { LevelContext } from './LevelContext';

const level = useContext(LevelContext);

3：Providerでの値の管理

Providerを使用して、指定されたコンポーネントツリーの一部に対して特定の値を提供します。

import { LevelContext } from './LevelContext';

export default function Section({ level, children }) {
  return (
    <section className="section">
      <LevelContext.Provider value={level}>
        {children}
      </LevelContext.Provider>
    </section>
  );
}

参考サイト・書籍

より詳しく学びたい方はこちら

Hooksについて

Contextについて