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

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

# 使い方

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

https://react-scan.com/

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

<details>
<summary>作成するコンポーネント</summary>

```react: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;
```

```react: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;

```

```react: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;
```

```react: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`を配置しましょう。

```react:App.tsx
import './App.css'
import BlogForm from './components/BlogForm'

function App() {

  return (
    <BlogForm />
  )
}

export default App
```

</details>

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

![スクリーンショット 2024-12-15 22.25.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3750522/d321e62f-08a7-a9c2-4d7a-347f0ae84518.png)

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

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

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

![スクリーンショット 2024-12-15 22.29.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3750522/2896995f-b241-1cf4-c577-1b760d430ba3.png)

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

![スクリーンショット 2024-12-15 22.33.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3750522/d97fd0b5-5045-b8dd-5c43-c5bbfb250530.png)

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

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

![スクリーンショット 2024-12-15 22.40.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3750522/ae7cf42f-e455-45c7-ec0a-65165fae6ca2.png)

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