Bibliothèque de prompts

Prompts React

Prompts pour les composants React : repérer les rendus inutiles, découper les gros composants et écrire des tests qui suivent le comportement de l’utilisateur.

Les prompts sont en anglais, la langue dans laquelle ils ont été écrits et testés. Les descriptions et les consignes de ces pages sont traduites.

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

Audit des re-rendus React

Trouve les causes des re-rendus inutiles dans un composant et donne le plus petit correctif pour chacune.

À utiliser quand : Un composant semble lent ou le profiler montre qu’il se rend à chaque frappe.

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>
Optimiser dans l’espace de travail

Variables

{{component}}
Le code source du composant, avec les enfants qu’il rend si vous les avez.

Exemple d’entrée

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

Exemple de sortie

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.

Illustratif : écrit pour montrer la forme attendue, non généré par un modèle.

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

Tests React Testing Library

Écrit des tests qui exercent un composant comme le fait un utilisateur, en interrogeant par rôle et par libellé.

À utiliser quand : Un composant n’a pas de tests, ou ses tests cassent à chaque refactorisation parce qu’ils vérifient des détails d’implémentation.

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>
Optimiser dans l’espace de travail

Variables

{{component}}
Le code source du composant.
{{behaviors}}
Les comportements à couvrir, un par ligne.

Exemple d’entrée

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

Exemple de sortie

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

Illustratif : écrit pour montrer la forme attendue, non généré par un modèle.

Adaptez-le à votre cas

Modifiez les exigences selon vos normes, puis vérifiez le résultat. L’analyseur de prompts le renote pendant que vous tapez, l’optimiseur retire le remplissage sans perdre une exigence, et le scanner de sécurité repère secrets et données personnelles avant l’envoi à un modèle.

Autres catégories