Fix Slow React Components by Optimizing State, Effects, and Re-Renders
I will paste a React component that works but feels slow, buggy, or hard to reason about.
Your job is to optimize it for performance, clarity, and correct React patterns without changing what the UI does.
βΈ»
What to focus on (required)
β’ Fix incorrect or inefficient useEffect usage
β’ Reduce unnecessary re-renders
β’ Improve state structure (merge, split, or derive state correctly)
β’ Remove stale closures and dependency mistakes
β’ Replace anti-patterns (useEffect doing too much, redundant state, etc.)
β’ Improve readability without over-abstracting
βΈ»
Rules
β’ Do not change visible behavior
β’ Do not introduce new libraries
β’ Prefer idiomatic React patterns
β’ Keep it understandable for mid-level devs
β’ If something should be derived instead of stored, explain why
βΈ»
Deliverables
1. Optimized component code (complete, runnable)
2. A short explanation of what was wrong
3. A before vs after render behavior summary
4. Clear notes on:
β’ useEffect dependencies
β’ state changes
β’ render triggers
PASTE YOUR REACT COMPONENT HERE
Optimized for LLMs
Programming Languages
Tags
Perfect for:
β’ React dashboards
β’ UI experiments
β’ VibeCoding projects
β’ Components that βwork but feel wrongβ
Tip 1: If state can be derived, donβt store it
If a value can be calculated from props or existing state, compute it during render instead of storing it. Stored derived state is a common cause of bugs and unnecessary re-renders.
βΈ»
Tip 2: Most useEffect bugs come from doing too much in one effect
Split large effects into smaller, focused ones. One effect should usually respond to one reason to change.
βΈ»
Tip 3: Question every useEffect that runs on mount
If an effect only transforms data or sets state, it may not need to be an effect at all. Prefer direct computation or event-driven updates.
βΈ»
Tip 4: Re-renders are normal, unnecessary re-renders are not
Focus on why a component re-renders, not how often. Optimize only when re-renders are tied to real performance issues.
βΈ»
Tip 5: Arrays and objects in dependencies are common traps
If you see effects re-running unexpectedly, check for inline objects or arrays in dependency lists. Memoize them or move them outside render.
βΈ»
Tip 6: Donβt reach for useMemo and useCallback too early
Use them when there is a clear re-render or computation cost. Overusing them can reduce readability without improving performance.
βΈ»
Tip 7: Console logs are your best first profiler
Log renders and effect runs before optimizing. Understanding the render flow is often more valuable than premature fixes.
βΈ»
Tip 8: Clean code is a performance feature
Readable state structure and predictable effects usually perform better than clever optimizations.
Save Prompt