ビルトイン React Hooks
Hooks を使用すると、コンポーネントからさまざまな React 機能を使用できます。ビルトイン Hooks を使用することも、それらを組み合わせて独自の Hooks を構築することもできます。このページでは、React のすべてのビルトイン Hooks を一覧表示します。
状態 Hooks
状態 を使用すると、コンポーネントはユーザー入力などの情報を「記憶」できます。たとえば、フォームコンポーネントは状態を使用して入力値を格納でき、画像ギャラリーコンポーネントは状態を使用して選択された画像インデックスを格納できます。
コンポーネントに状態を追加するには、次のいずれかの Hooks を使用します
useStateは、直接更新できる状態変数を宣言します。useReducerは、更新ロジックをreducer 関数内に含む状態変数を宣言します。
function ImageGallery() {
const [index, setIndex] = useState(0);
// ...コンテキスト Hooks
コンテキスト を使用すると、コンポーネントは props として渡さずに、遠くの親から情報を受け取ることができます。たとえば、アプリのトップレベルコンポーネントは、現在の UI テーマを、どれだけ深くても、その下のすべてのコンポーネントに渡すことができます。
useContextは、コンテキストを読み取り、購読します。
function Button() {
const theme = useContext(ThemeContext);
// ...Ref Hooks
Refs を使用すると、コンポーネントはレンダリングに使用されない情報を保持できます。たとえば、DOM ノードやタイムアウト ID などです。状態とは異なり、ref を更新してもコンポーネントは再レンダリングされません。Refs は React パラダイムからの「エスケープハッチ」です。ビルトインブラウザ API など、React 以外のシステムを操作する必要がある場合に役立ちます。
useRefは、ref を宣言します。任意の値を保持できますが、ほとんどの場合、DOM ノードを保持するために使用されます。useImperativeHandleを使用すると、コンポーネントによって公開される ref をカスタマイズできます。これはめったに使用されません。
function Form() {
const inputRef = useRef(null);
// ...Effect Hooks
Effects を使用すると、コンポーネントは外部システムに接続して同期できます。これには、ネットワーク、ブラウザ DOM、アニメーション、別の UI ライブラリを使用して記述されたウィジェット、およびその他の React 以外のコードの処理が含まれます。
useEffectは、コンポーネントを外部システムに接続します。
function ChatRoom({ roomId }) {
useEffect(() => {
const connection = createConnection(roomId);
connection.connect();
return () => connection.disconnect();
}, [roomId]);
// ...Effects は React パラダイムからの「エスケープハッチ」です。アプリケーションのデータフローを調整するために Effects を使用しないでください。外部システムと対話していない場合は、Effect が必要ない可能性があります。
タイミングが異なる useEffect のめったに使用されないバリエーションが 2 つあります
useLayoutEffectは、ブラウザが画面を再描画する前に起動します。ここでレイアウトを測定できます。useInsertionEffectは、React が DOM に変更を加える前に起動します。ライブラリはここに動的 CSS を挿入できます。
パフォーマンス Hooks
再レンダリングのパフォーマンスを最適化する一般的な方法は、不要な処理をスキップすることです。たとえば、キャッシュされた計算を再利用したり、前回のレンダリング以降データが変更されていない場合は再レンダリングをスキップしたりするように React に指示できます。
計算と不要な再レンダリングをスキップするには、次のいずれかの Hook を使用します。
useMemoを使用すると、負荷の高い計算結果をキャッシュできます。useCallbackを使用すると、最適化されたコンポーネントに渡す前に関数定義をキャッシュできます。
function TodoList({ todos, tab, theme }) {
const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
// ...
}画面を実際に更新する必要があるため、再レンダリングをスキップできない場合があります。その場合は、同期的に行う必要があるブロッキング更新（入力へのタイピングなど）と、ユーザーインターフェイスをブロックする必要のない非ブロッキング更新（チャートの更新など）を分離することで、パフォーマンスを向上させることができます。
レンダリングの優先順位を付けるには、次のいずれかの Hook を使用します。
useTransitionを使用すると、状態遷移を非ブロッキングとしてマークし、他の更新による割り込みを許可できます。useDeferredValueを使用すると、UI の重要でない部分の更新を遅延させ、他の部分を先に更新させることができます。
その他の Hooks （以下略、SVG画像の翻訳は不要）
これらの Hook は、主にライブラリ作成者にとって有用であり、アプリケーションコードでは一般的に使用されません。
useDebugValueを使用すると、React DevTools にカスタム Hook のラベルをカスタマイズして表示できます。useIdを使用すると、コンポーネントに一意の ID を関連付けることができます。通常、アクセシビリティ API で使用されます。useSyncExternalStoreを使用すると、コンポーネントを外部ストアにサブスクライブできます。
useActionStateを使用すると、アクションの状態を管理できます。
独自の Hooks
JavaScript 関数として 独自のカスタム Hooks を定義することもできます。