My react dashboard for this local non-profit is a total disaster and its lagging so bad. I have a hard deadline by next friday and im honestly panicking because nothing i do is fixing these re-render loops.
I read online that I should use Claude Codes refactoring skills for hooks but some dev blogs say it just makes the code more complex and messy if you dont prompt it right. Do I tell it to focus on useMemo specifically or just let it roam? I dont want to waste my monthly budget on garbage results that break my state management. What are the actual best skills or specific commands to make Claude Code actually optimize React components properly?
Jumping in here... honestly, you gotta be real careful with letting it just refactor everything at once. If youre on a tight budget, I would suggest feeding it the output from your React DevTools profiler first rather than letting it guess. Use the Anthropic Claude Code CLI Tool and target specific files with the command to analyze component for prop drilling and stale closures. Specific commands help. Tell it to implement React.memo only where props are stable because if you let it roam, itll wrap everything and make the bundle huge. I find that using Anthropic Claude 3 Opus API for the initial logic check is worth the extra cost because it doesnt get as confused by complex state management. Just make sure to tell it to focus on referential stability specifically... that usually stops those infinite loops dead in their tracks. It avoids that messy code you were worried about if you keep the scope tiny.
I would suggest being very cautious about letting Claude roam freely through your repo. To save your budget, make sure to isolate the specific laggy component first. You might want to consider focusing your prompt on fixing dependency arrays in your hooks. Using Anthropic Claude 3.5 Sonnet API works great, but keep the scope narrow so you don't waste money on messy refactors that break state management... honestly, focus is key here.
To add to the point above, I totally agree about being cautious with the budget. Honestly reminds me of when my cousin tried fixing his apps performance with a bot while he was out for drinks.
^ This. Also, you're right to be worried about the budget. Unfortunately, I had some issues with Claude Code recently where it just kept hallucinating hook dependencies and it was not as good as expected. I think... maybe it tries to be too clever for its own good? Not sure, but someone told me that ChatGPT actually handles the logic of stale closures a bit better because it doesn't try to refactor your entire file structure at once. I was pretty disappointed when Claude turned my simple dashboard into a spaghetti mess of useCallbacks that didn't even work. IIRC, some people suggest using smaller models for logic checks first, but honestly, even then it's a gamble. Just watch it like a hawk or you'll be reverting changes until 3 AM.
Did this last week, worked perfectly