プロンプトライブラリ

Reactのプロンプト

React コンポーネント向けのプロンプト：無駄な再レンダリングの発見、大きなコンポーネントの分割、ユーザーの操作に沿ったテストの作成。

プロンプト本体は、作成・テストした言語である英語です。これらのページの説明と案内文は翻訳されています。

  • performance
  • hooks
  • components
100/100 · 153 トークン

React の再レンダリング監査

コンポーネントの不要な再レンダリングの原因を見つけ、それぞれに最小の修正を示します。

使う場面： コンポーネントが遅く感じる、またはプロファイラで入力のたびに再レンダリングされているのが見えるとき。

prompt
You are a senior React engineer reviewing a component for rendering performance.

## Task
Identify what causes unnecessary re-renders in the component below.

## Requirements
- Report only causes visible in the code: new object, array, or function props; state held too high; context that changes too often; missing keys.
- Quote the line for every cause.
- Give the smallest change that removes each cause.
- Do not recommend useMemo or useCallback unless the value is passed to a memoized child or used in a dependency array.

## Output format
Return a numbered list. Each item has three labeled lines: Cause, Line, and Fix. End with one sentence naming the fix to apply first.

## Input
<component>
{{component}}
</component>
ワークスペースで最適化

変数

{{component}}
コンポーネントのソース。レンダリングする子があればそれも含めます。

入力例

component: a SearchPage that passes `filters={{ status, tag }}` to a memoized ResultsList.

出力例

1. Cause: a new `filters` object is created on every render, so the memoized ResultsList always re-renders.
   Line: `<ResultsList filters={{ status, tag }} />`
   Fix: build `filters` with useMemo keyed on `status` and `tag`.

Apply fix 1 first.

例示です。期待される形を示すために書いたもので、モデルが生成したものではありません。

  • testing
  • react testing library
  • components
100/100 · 158 トークン

React Testing Library のテスト

ロールやラベルで要素を取得し、ユーザーと同じようにコンポーネントを操作するテストを書きます。

使う場面： コンポーネントにテストがない、または実装の詳細を確認しているためリファクタリングのたびにテストが壊れるとき。

prompt
You are a senior React engineer writing tests with React Testing Library and Vitest.

## Task
Write tests for the component below that cover the behaviors listed.

## Requirements
- Query elements by role, label, or text; never by class name or test id.
- Use userEvent for every interaction.
- Write one test per behavior, named as a sentence describing what the user sees.
- Mock only the network calls named in the behaviors.
- Do not test internal state or the number of renders.

## Output format
Return one TypeScript code block containing the complete test file, followed by a bulleted list of any listed behavior you could not test and why.

## Input
<component>
{{component}}
</component>

<behaviors>
{{behaviors}}
</behaviors>
ワークスペースで最適化

変数

{{component}}
コンポーネントのソース。
{{behaviors}}
カバーする動作を 1 行に 1 つ。

入力例

component: a LoginForm with email and password fields.
behaviors: shows an error when the email is empty; disables the button while submitting.

出力例

```tsx
it('shows an error when the email is empty', async () => {
  render(<LoginForm />);
  await userEvent.click(screen.getByRole('button', { name: /sign in/i }));
  expect(screen.getByRole('alert')).toHaveTextContent(/email is required/i);
});
```

例示です。期待される形を示すために書いたもので、モデルが生成したものではありません。

自分用に調整する

要件を自分の基準に合わせて編集し、結果をチェックしましょう。プロンプトアナライザーは入力に合わせて再採点し、オプティマイザーは要件を落とさずに冗長な表現を削り、セキュリティスキャナーはモデルに送る前に秘密情報や個人データを検出します。

その他のカテゴリ