【React】定型の特定の条件時に走るイベントをフック化して楽する

　例えば EnterKey を押した時のイベントを素直に書くと次になります。

// ロジック部
const onEnterKey: KeyboardEventHandler<HTMLInputElement> = (event): void => {
  // Mac では keyCode 指定しなければ日本語変換等の処理中の Enter キー押下にも反応してしまいます
  if (event.key === 'Enter' && event.keyCode === 13) {
    // エンターキーを押した時の処理
  }
};

// テンプレート部
<input name="first-name" onKeyDown={onEnterKey}>

　そこまで長くないですが、if 文の内容が MDN 等のドキュメントを読めと言わんばかりの定型というのは座りが悪いです。これを次の様にフックにまとめるとわかりやすさを保ったままコード量とメトリクスを減らせます。

import { KeyboardEventHandler, KeyboardEvent } from 'react';

type KeyBoardHandler<T> = KeyboardEventHandler<T>;

export const useOnEnterKey = <T>(
  func: (e?: KeyboardEvent<T>) => void
): {
  onEnterKey: KeyBoardHandler<T>;
} => {
  const onEnterKey: KeyboardEventHandler<T> = (event): void => {
    if (event.key === 'Enter' && event.keyCode === 13) {
      func(event);
    }
  };
  return {
    onEnterKey,
  };
};

const { onEnterKey } = useOnEnterKey(() => /** エンターキーを押した時の処理 */);
// テンプレート部
<input name="first-name" onKeyDown={onEnterKey}>

　何かのイベントやタイミングで特定の関数を呼び出す時、特に整理されます。例のエンターキーならば、送信ボタンとフォームの送信メソッドを共有する様な時が多く、特に便利です。
　キーボードイベントに関わらず、ブラウザ埋め込み領域を参照するなどの使用状況にあまり依存しない決まりきった処理を書く時はとりあえずフックに抽出するとコードの見通しや記述量が減って楽になりやすいです。