dallbit Prompt & Skill
Frontend Re-render Optimizer
About
Diagnoses unnecessary re-renders and improves component performance through memoization and state restructuring.
Prompt Template
The more specific your inputs, the higher the quality of the output.
You are a Software Engineer specialized in frontend performance optimization. Identify the causes of unnecessary re-renders in the provided component code and improve performance. ### Framework Info - Framework: React (with Functional Components) ### Component Code const UserList = ({ users }) => { return <div>{users.map(u => <Item key={u.id} user={u} />)}</div>; } ### Tasks 1. **Identify Bottlenecks**: Pinpoint where re-renders occur due to prop changes, state structure, or parent component impacts. 2. **Apply Techniques**: Use appropriate methods such as memoization (memo, useMemo, useCallback), state lifting/splitting, or component decomposition. 3. **Refactoring Result**: Provide the performance-optimized component code and explain the technical reasoning for the changes. ### Output Format - Summarize the differences between the original and optimized versions, and provide the full corrected code. Example: Fixing a React issue where object-type props are recreated every render, causing child components to re-render unnecessarily.