Prompt-Bibliothek

React-Prompts

Prompts für React-Komponenten: unnötige Renderings finden, große Komponenten aufteilen und Tests schreiben, die dem Nutzerverhalten folgen.

Die Prompts sind auf Englisch, der Sprache, in der sie geschrieben und getestet wurden. Beschreibungen und Hinweise auf diesen Seiten sind übersetzt.

  • performance
  • hooks
  • components
100/100 · 153 Tokens

Audit unnötiger React-Re-Renders

Findet die Ursachen unnötiger Re-Renders in einer Komponente und gibt für jede die kleinste Korrektur an.

Einsetzen, wenn: Eine Komponente fühlt sich langsam an oder der Profiler zeigt, dass sie bei jedem Tastendruck rendert.

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>
Im Arbeitsbereich optimieren

Variablen

{{component}}
Der Quellcode der Komponente, mit den gerenderten Kindern, falls vorhanden.

Beispieleingabe

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

Beispielausgabe

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.

Beispielhaft: geschrieben, um die erwartete Form zu zeigen, nicht von einem Modell erzeugt.

  • testing
  • react testing library
  • components
100/100 · 158 Tokens

React-Testing-Library-Tests

Schreibt Tests, die eine Komponente so benutzen wie ein Nutzer, mit Abfragen nach Rolle und Label.

Einsetzen, wenn: Eine Komponente hat keine Tests, oder ihre Tests brechen bei jedem Refactoring, weil sie Implementierungsdetails prüfen.

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>
Im Arbeitsbereich optimieren

Variablen

{{component}}
Der Quellcode der Komponente.
{{behaviors}}
Die abzudeckenden Verhaltensweisen, eine pro Zeile.

Beispieleingabe

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

Beispielausgabe

```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);
});
```

Beispielhaft: geschrieben, um die erwartete Form zu zeigen, nicht von einem Modell erzeugt.

Machen Sie ihn zu Ihrem

Passen Sie die Anforderungen an Ihre Standards an und prüfen Sie dann das Ergebnis. Der Prompt-Analyzer bewertet neu, während Sie tippen, der Optimierer entfernt Füllwörter, ohne eine Anforderung zu verlieren, und der Sicherheitsscanner markiert Geheimnisse und personenbezogene Daten, bevor Sie den Prompt an ein Modell senden.

Weitere Kategorien