React Scanでレンダリング状況を可視化する

まずはじめに

ReactやNext.jsといったWeb開発において、レンダリングの状況を正しく把握することは非常に重要です。（偉そうに言っていますが、私もできているわけではありません💦）そこで今回は、レンダリング状況を視覚的にわかりやすく把握できる便利なライブラリReact Scanをご紹介します。

使い方

公式ドキュメントにもあるとおり、使い方は非常にシンプルです。
せっかくなのでハンズオン形式でご紹介します。

まずは、React Scanを試すデモプロジェクトをViteで作成しましょう。
作成できたら、以下のコンポーネントを作成てください。

作成するコンポーネント

BlogForm.tsx

import React, { useState } from 'react';
import InputField from './InputField';
import TextareaField from './TextareaField';
import SubmitButton from './SubmitButton';

const BlogForm: React.FC = () => {
  const [formData, setFormData] = useState({
    title: '',
    author: '',
    content: '',
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleSubmit = () => {
    console.log('Submitted:', formData);
  };

  return (
    <form style={{ maxWidth: '600px', margin: '0 auto' }}>
      <h1>ブログ投稿フォーム</h1>
      <InputField
        label="タイトル"
        type="text"
        name="title"
        value={formData.title}
        onChange={handleChange}
      />
      <InputField
        label="投稿者"
        type="text"
        name="author"
        value={formData.author}
        onChange={handleChange}
      />
      <TextareaField
        label="本文"
        name="content"
        value={formData.content}
        onChange={handleChange}
      />
      <SubmitButton onClick={handleSubmit} label="投稿する" />
    </form>
  );
};

export default BlogForm;

InputField.tsx

type InputFieldProps = {
  label: string;
  type: string;
  name: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};

const InputField: React.FC<InputFieldProps> = ({ label, type, name, value, onChange }) => {
  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <input
        type={type}
        id={name}
        name={name}
        value={value}
        onChange={onChange}
        style={{ display: 'block', margin: '8px 0', width: "100%" }}
      />
    </div>
  );
};

export default InputField;

SubmitButton.tsx

type SubmitButtonProps = {
    onClick: () => void;
    label: string;
};

const SubmitButton: React.FC<SubmitButtonProps> = ({ onClick, label }) => {
    return (
        <button type="button" onClick={onClick}>
            {label}
        </button>
    );
};

export default SubmitButton;

TextareaFeild.tsx

type TextareaFieldProps = {
  label: string;
  name: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
};

const TextareaField: React.FC<TextareaFieldProps> = ({ label, name, value, onChange }) => {
  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <textarea
        id={name}
        name={name}
        value={value}
        onChange={onChange}
        style={{ display: 'block', margin: '8px 0', width: '100%', height: '100px' }}
      />
    </div>
  );
};

export default TextareaField;

App.cssやindex.cssに書かれているスタイルは削除し、App.tsxに先ほど作成したBlogFormを配置しましょう。

App.tsx

import './App.css'
import BlogForm from './components/BlogForm'

function App() {

  return (
    <BlogForm />
  )
}

export default App

$ npm run devを実行し、http://localhost:5173にアクセスすると、よくありがちなブログの投稿フォームが表示されます。

React Scanは以下のコマンドで実行できます。

$ npx react-scan@latest http://localhost:5173

コマンドを実行すると、以下のような画面が立ち上がります。

フォームに値を入力すると、BlogFormに定義したstate更新により、BlogFormとすべての子コンポーネントが再レンダリングされていることが紫色の枠線で可視化されています。

右下のバーにある目のマークをクリックすると、この機能をオフにすることができます。

また、指定した要素のpropsを確認することもできます。

まとめ

今回はReact Scanというライブラリについてご紹介しました。ぜひ皆さんもこれからの開発で利用し見てください。また、次回はこのライブラリを使って、レンダリングやhooksの話を投稿して行こうと思うのでそちらも見ていただけたら嬉しいです。