You're Probably Using Claude Sonnet 4 for React All Wrong. Here's How to Fix It.

The Good, The Bad, & The AI: Where Sonnet 4 Shines & Where It Stumbles

What Sonnet 4 Is AMAZING At:

• Scaffolding & Boilerplate: This is the low-hanging fruit. Need a new React component with state management, props, & a basic structure? Sonnet 4 can spit that out in seconds. It's fantastic for getting rid of the tedious setup work. You can ask it to create a new component with specific props, state hooks (
  1 useState
  ,
  1 useEffect
  ), & even basic JSX structure. It's a huge time-saver.
• Component Generation: This is where it gets more interesting. You can give it a description of a component you need, & it will generate the code for you. For example, you could say, "Create a React component for a user profile card that displays a user's name, email, & a profile picture. It should also have a button to edit the profile." Sonnet 4 will generate the component with props for the user data & a placeholder function for the edit button's
  1 onClick
  event.
• Styling with Tailwind CSS & CSS-in-JS: This is another area where Sonnet 4 really shines. It's great at generating Tailwind CSS classes for your components, or even writing the CSS-in-JS code for libraries like styled-components or Emotion. You can describe the layout you want, & it will generate the necessary styles. For example, "Style this button with a blue background, white text, & rounded corners. It should have a slightly darker blue on hover."
• Refactoring Code: This is one of the most powerful features. You can give Sonnet 4 a piece of your existing code & ask it to refactor it. For example, you can ask it to convert a class component to a functional component with hooks, or to extract a piece of logic into a custom hook. This is where providing context is KEY. You can’t just dump the code & say “make it better.” You need to explain what you want to achieve.
• Writing Documentation: Let's be honest, nobody likes writing documentation. Sonnet 4 is a lifesaver here. You can give it a component & ask it to write JSDoc comments for the props, or even a full README file for a project.

Where Sonnet 4 Still Needs a Little Help:

• Understanding Component Rendering: This is a big one. Sonnet 4 can sometimes struggle with the nuances of React's rendering behavior. It might suggest solutions that cause unnecessary re-renders, leading to performance issues. For example, it might not properly memoize a component with
  1 React.memo
  or use
  1 useCallback
  for functions passed as props.
• Complex State Management: For simple components,
  1 useState
  &
  1 useEffect
  are fine. But for more complex state management with libraries like Redux or Zustand, Sonnet 4 can get a bit lost. It might not structure the actions & reducers correctly, or it might not understand how to properly connect the components to the store.
• Ignoring Suggested Libraries: This is a weird one, but it happens. You might suggest a specific library to use for a task, & Sonnet 4 will just ignore you & try to implement it from scratch using a different method. For example, you might ask it to use a drag-and-drop library, but it will try to use the native HTML5 drag-and-drop API instead. A gentle reminder usually gets it back on track.
• Working with Large, Proprietary Codebases: If you're working on a massive, internal codebase with a lot of custom tools & libraries, Sonnet 4 will struggle. It's not going to know your company's coding conventions or the intricacies of your internal APIs. This is where you need to be VERY specific with your prompts & provide as much context as possible.

The "Senior Dev" Prompting Strategy: How to Get the Best Results

1. Set the Stage: Provide Deep Context

• The Goal: What are you trying to achieve? What is the user story? What is the business logic?
• The Tech Stack: What libraries & frameworks are you using? (React, Next.js, Vite, Tailwind CSS, etc.)
• The Existing Code: This is CRITICAL. Upload the relevant files. Don't just paste a snippet of code. Give it the whole component, the parent component, the CSS file, the error logs, your
  1 package.json
  —whatever is relevant.
• The Persona: This is a pro-tip. Tell Sonnet 4 who it is. For example, "You are a senior React developer with expertise in building scalable & maintainable frontend applications." This helps to set the tone & the level of expertise you expect.

"You're now my senior React partner. We're building a new feature for our e-commerce application. The goal is to create a new product filter component that allows users to filter products by price, category, & brand. We're using Next.js, Tailwind CSS, & Zustand for state management. I've uploaded the existing

1 ProductList

component, the

1 useProductStore

Zustand store, & the

1 api/products

endpoint. Before you write any code, I want you to ask me some questions to better understand the requirements."

2. The Iterative Loop: Plan, Code, Review, Refine

• Plan: Ask Sonnet 4 to create a plan before it starts coding. This could be a list of TODOs, a high-level architecture diagram, or a step-by-step breakdown of the implementation. This is a great way to catch any misunderstandings early on.
• Code: Once you're happy with the plan, ask Sonnet 4 to start coding. Break the task down into smaller, manageable chunks. For example, instead of saying "build the entire filter component," you could say, "First, let's create the JSX structure for the price filter."
• Review: This is where your expertise as a developer comes in. Sonnet 4 is not perfect. You need to review the code it generates. Look for performance issues, bugs, & deviations from your coding standards.
• Refine: Provide feedback to Sonnet 4. If you see something you don't like, tell it. Be specific. For example, "This looks good, but I think we can improve the performance by memoizing the
  1 ProductCard
  component. Can you show me how you would do that?"

3. Pro-Tips for Advanced Usage

• Use the
  1 claude.md
  file: For larger projects, create a
  1 claude.md
  file in the root of your project. This file should contain a high-level overview of your project, the architecture, the coding conventions, & any other important information. You can then tell Sonnet 4 to refer to this file in your prompts. This is a great way to provide persistent context without having to repeat yourself in every prompt.
• Don't be afraid to say "no": If Sonnet 4 generates code that you don't like, don't be afraid to reject it. You can say, "That's not what I was looking for. Let's try a different approach." Remember, you're the senior developer in this relationship.
• Leverage Sonnet for Customer-Facing Interactions: Here's where it gets really interesting. Once you've built your amazing React application, you're going to have users. & those users are going to have questions. This is where a tool like Arsturn can be a total game-changer. You can train an AI chatbot on your application's documentation, your FAQs, & even your marketing materials. Then, you can embed this chatbot on your website to provide instant, 24/7 support to your users. It's a great way to improve the user experience & free up your team to focus on building new features.
• Automate Lead Generation & Engagement: Beyond just support, you can use AI to proactively engage with your website visitors. Imagine a user is browsing your new product filter page. You can have an AI chatbot pop up & offer to help them find what they're looking for. This is where a platform like Arsturn comes in handy. It helps businesses build no-code AI chatbots trained on their own data to boost conversions & provide personalized customer experiences. It’s a great way to turn your React project into a lead-generating machine.

A Real-World Example: Refactoring a Form Editor

Final Thoughts