mirror of
https://github.com/codeflash-ai/codeflash-internal.git
synced 2026-05-04 18:25:18 +00:00
prompt update
This commit is contained in:
parent
a59eeff5b7
commit
ad57aa6bbc
3 changed files with 21 additions and 4 deletions
|
|
@ -63,6 +63,11 @@ You are a professional React performance engineer. Your goal is to optimize Reac
|
|||
- Use React internals or undocumented APIs.
|
||||
- Wrap every single function in useCallback or every value in useMemo indiscriminately.
|
||||
|
||||
**Evaluation Method**
|
||||
- Your optimization will be evaluated by measuring **re-render count** and **render duration** during interaction scenarios (typing, clicking, state changes), not just initial mount time.
|
||||
- Memoization (useMemo, useCallback) may slightly increase mount time but should reduce update-phase re-renders — this is the desired outcome.
|
||||
- Focus on reducing the number of unnecessary update-phase renders and the per-render cost during interactions.
|
||||
|
||||
**Response Format (REQUIRED)**
|
||||
- ALWAYS start your response with a brief explanation (2-4 sentences) of what optimization you made and why it reduces re-renders or improves render performance.
|
||||
- Then provide the optimized code in a markdown code block.
|
||||
|
|
|
|||
|
|
@ -13,9 +13,12 @@ You are a professional React test engineer. Your goal is to generate comprehensi
|
|||
- Always wrap state-changing operations in `act()` when needed.
|
||||
|
||||
3. **Re-render Counting Tests**
|
||||
- Create tests that verify the component doesn't re-render unnecessarily.
|
||||
- Use the render counting pattern: render with props, then rerender with same props.
|
||||
- For memoized components, verify that same props produce zero extra renders.
|
||||
- Create tests that trigger multiple renders and measure rendering efficiency.
|
||||
- **Same-props rerender**: Render with props, then `rerender(<Component {...sameProps} />)` — measures React.memo effectiveness.
|
||||
- **Filtered interaction**: Type into a search/filter input, then verify the component re-renders with filtered results. Use `userEvent.type(input, 'query')` to trigger state changes.
|
||||
- **Rapid state updates**: Fire multiple sequential events (e.g., clicking a button 5 times rapidly) to trigger multiple state updates and observe rendering behavior.
|
||||
- **Child prop stability**: Change parent state in a way that should NOT affect child component props — tests whether parent optimizes prop references.
|
||||
- **IMPORTANT**: Do NOT assert specific render counts. Both original and optimized code must pass the same tests. Codeflash measures render metrics automatically via React.Profiler instrumentation. Focus on creating realistic interaction scenarios that produce measurable re-render patterns.
|
||||
|
||||
**Test Framework**
|
||||
- Use `@testing-library/react` for rendering and querying.
|
||||
|
|
|
|||
|
|
@ -29,9 +29,18 @@ Generate comprehensive tests for the following React component. Include render c
|
|||
```
|
||||
{% endif %}
|
||||
|
||||
{% if optimization_opportunities %}
|
||||
## Detected Optimization Opportunities
|
||||
The following performance issues were detected by static analysis. Generate interaction-heavy tests that exercise these code paths so that render metrics can be measured before and after optimization:
|
||||
{% for opp in optimization_opportunities %}
|
||||
- **{{ opp.type }}** ({{ opp.severity }}): {{ opp.message }}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
## Requirements
|
||||
1. Generate tests using @testing-library/react and @testing-library/user-event.
|
||||
2. Include at least one render correctness test.
|
||||
3. Include re-render counting tests if the component could benefit from memoization.
|
||||
3. Include interaction tests that trigger re-renders (typing, clicking, state changes) so Codeflash can measure render performance via React.Profiler.
|
||||
4. Use `jest.fn()` for callback props.
|
||||
5. Ensure tests are self-contained and will pass on the original component code.
|
||||
6. Do NOT assert specific render counts — Codeflash measures render metrics automatically.
|
||||
|
|
|
|||
Loading…
Reference in a new issue