便利なReact Hooksの紹介

はじめに

コピー＆ペーストですぐに使える便利なReact Hooksを紹介する。

useMount

コンポーネンがマウントされたときに登録されたコールバックを実行する。

// hooks の実装
export const useMount = (callback: () => void) => {
  const mountRef = React.useRef(callback);
  mountRef.current = callback;
  React.useEffect(() => {
    mountRef.current?.();
  }, []);
};

// 使い方
function Example() {
  useMount(()=>{
    // 実行するコールバック
  });

  return ...
}

useUnmount

コンポーネンがアンマウントされたときに登録されたコールバックを実行する。

// hooks の実装
export const useUnmount = (callback: () => void) => {
  const unmountRef = React.useRef(callback);
  unmountRef.current = callback;
  React.useEffect(
    () => () => {
      unmountRef.current?.();
    },
    [],
  );
};

// 使い方
function Example() {
  useUnmount(()=>{
    // 実行するコールバック
  });

  return ...
}

useOnEvent

イベントの登録と解除を自動的に行う。

// イベントの登録
export function on(
  element: Element | Window | Document,
  eventName: string,
  callback: (ev: Event) => void,
  options?: boolean | AddEventListenerOptions
): () => void {
  element.addEventListener(eventName, callback, options);

  return () => element.removeEventListener(eventName, callback, options);
}

// hooks の実装
export function useOnEvent<TElement extends Element, TEvent extends Event>(
  element:
    | React.RefObject<TElement | undefined | null>
    | TElement
    | Window
    | Document
    | undefined
    | null,
  eventName: string,
  callback: (ev: TEvent) => void,
  useCapture?: boolean
) {
  const callbackRef = React.useRef(callback);
  callbackRef.current = callback;

  React.useEffect(() => {
    const actualElement =
      element && 'current' in element ? element.current : element;
    if (!actualElement) {
      return;
    }

    const dispose = on(
      actualElement,
      eventName,
      (ev) => callbackRef.current(ev as TEvent),
      useCapture
    );
    return dispose;
  }, [element, eventName, useCapture]);
}

// 使い方
function Example() {

  const onKeyDown = (ev: KeyboardEvent) => {
    // 実行するコールバック
  }
  useOnEvent(document, 'keydown', onKeyDown);

  return ...
}