React で使える、軽量デバッグコンポーネント

デバッグ情報を表示するためのコンポーネント。リアルタイムで情報を更新するので、scroll イベントなどログでとると多すぎて見づらいケースで便利。

実際に表示されるとこんな感じ↓

実際のコードがこちら。コンポーネントを返すカスタムフックというちょっと珍しいことをしている。

import { PropsWithChildren, useCallback, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';

export const useDebugComponent = () => {
  const $el = useRef(document.createElement('div'));
  useEffect(() => {
    document.body.appendChild($el.current);
    return () => {
      document.body.removeChild($el.current);
    };
  }, []);
  const Debug = useCallback(
    ({ children }: PropsWithChildren<Record<string, unknown>>) =>
      createPortal(
        <div
          style={{
            position: 'fixed',
            bottom: 120,
            left: 0,
            background: '#fff8',
            padding: '5px 2px',
            zIndex: 10000,
          }}
        >
          {children}
        </div>,
        $el.current
      ),
    []
  );
  return Debug;
};

30行しかないのでコピペもしやすくて使いやすい。React 以外のパッケージを読み込んでないので、追加でインストールする必要もなし。あらかじめ gitignore にこのファイルを指定しておくと良さそう。

使い方はこんな感じ

import { useState } from 'react';
import { useDebugComponent } from './useDebugComponent.tsx';

const App = () => {
  const Debug = useDebugComponent();
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount((count) => count + 1)}>+1</button>
      <Debug>count: {count}</Debug>
    </div>
  );
};