【React.js/Next.js】React Hooks まとめ・完全ガイド

今回は、React.js を学ぶ上で押さえておきたい主要な機能のひとつである、React Hooks についてご紹介します。

React Hooks とは何か？

React Hooks とは、React 16.8 で導入された機能で、 これまで クラスコンポーネント でしか扱えなかった “状態管理” などのReactの機能 を、関数コンポーネント でも扱えるようにした仕組みです。

現在の React.jsの開発 では、React Hooks を前提とした 関数コンポーネント が主流です。

React Hooks が生まれた背景

それまでの React.js では、状態管理 や ライフサイクルの処理 を行うには クラスコンポーネントが必要でした。
しかし、クラスコンポーネント はコードが複雑になりやすく、同じロジックを複数のコンポーネントで共有することも簡単ではありませんでした。

そこで登場したのが React Hooks です。
React Hooks により、関数コンポーネント だけで効率的に再利用可能なコードを書くことができるようになりました。

React Hooks 一覧

React Hooks 主要な機能の一覧は下記になります。※Hook名 がリンクになっています。

Hook名	用途	簡単な説明	サンプルコード
useState	状態管理	コンポーネント内で状態を保持し、更新すると再レンダリング	const [count, setCount] = useState(0);
useEffect	副作用処理	API取得、DOM操作、タイマーなど副作用処理を実行	useEffect(() => { fetchData(); }, []);
useRef	DOM参照・値保持	DOM参照や再レンダリング不要の値保持に使用	const inputRef = useRef();
【優先】use ※API useContext	(useのみ)Promise 利用 コンテキスト利用	(useのみ)Promiseの値を取得してコンポーネントで使用 Contextの値を取得してコンポーネントで使用	const data = use(fetchData()); const theme = useContext(ThemeContext);
useMemo ※ useCallback / memo と同じサイト	計算結果メモ化	重い計算の結果を再利用、パフォーマンス最適化	const double = useMemo(() => count * 2, [count]);
useCallback ※ useMemo / memo と同じサイト	関数メモ化	再レンダリング時に同じ関数を再利用、子コンポーネントの無駄レンダリング防止	const increment = useCallback(() => setCount(c => c + 1), []);
memo ※API ※ useMemo / useCallback と同じサイト	コンポーネントの描画結果メモ化	props が前回と同じ場合、再レンダリング時に同じコンポーネントを再利用、子コンポーネントの再レンダリングの防止	const MemoCountButton = memo(({ id, onIncrement, children }) => { console.log('MemoCountButton:', id); return <button onClick={onIncrement}>{children}</button>; });
useReducer	複雑な状態管理	Redux風の状態管理が可能、状態遷移ロジックを分離	const [state, dispatch] = useReducer(reducer, initialState);
useImperativeHandle	Refカスタマイズ	親コンポーネントに公開するインスタンスメソッドを定義	useImperativeHandle(ref, () => ({ focus: () => inputRef.current.focus() }));
useLayoutEffect	レイアウト副作用	DOM描画後すぐに同期で副作用を実行（useEffectより優先）	useLayoutEffect(() => { console.log(divRef.current.offsetHeight); }, []);
useDebugValue	デバッグ用	カスタムHookのデバッグ情報を表示	const deferred = useDeferredValue(value);

まとめ

React Hooks の 概要 や 生まれた背景・機能一覧 について、いかがでしたでしょうか？

上記の React Hooks の各機能について、各リンク先よりご確認ください。