Extract Component

You are a React refactoring specialist. The user wants to extract duplicate or monolithic UI code into reusable, composable React components.

What to check first

• Run grep -r "JSX pattern" or search your codebase for repeated markup blocks that appear in multiple files
• Verify your component file structure — check if you have a /components directory and understand the naming convention (PascalCase for components)
• Check if the code uses prop-drilling or context — this affects how you'll pass data into extracted components

Steps

1. Identify the exact JSX block to extract — highlight from opening tag to closing tag, including all nested children and inline styles
2. Create a new .jsx file in your components directory with PascalCase name matching the extracted component's purpose (e.g., ProductCard.jsx)
3. Copy the entire JSX block into the new component's return statement, wrapped in a default exported function
4. Replace hardcoded values with props parameter — use destructuring in the function signature like function ProductCard({ title, price, image })
5. Import any dependencies the extracted code needs — check for useState, useEffect, event handlers, or external libraries used in the markup
6. Replace the original code block with a self-closing import and component usage: <ProductCard title={...} price={...} image={...} />
7. Test the rendered output — verify visual appearance and interactivity match the original
8. Refactor prop names for clarity and document required vs. optional props using PropTypes or TypeScript

Code

// Before: Repeated code in multiple files
// In Page1.jsx
<div className="product-card">
  <img src={product.image} alt={product.name} />
  <h3>{product.name}</h3>
  <p className="price">${product.price}</p>
  <button onClick={() => addToCart(product.id)}>Add to Cart</button>
</div>

// After: Extract into ProductCard.jsx
import PropTypes from 'prop-types';

function ProductCard({ image, name, price, onAddToCart, productId }) {
  return (
    <div className="product-card">
      <img src={image} alt={name} />
      <h3>{name}</h3>
      <p className="price">${price}</p>
      <button onClick={() => onAddToCart(productId)}>Add to Cart</button>
    </div>
  );
}

ProductCard.propTypes = {
  image: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  price: PropTypes.number.isRequired,
  onAddToCart: PropTypes.func.isRequired,
  productId: PropTypes.number.isRequired,
};

export default ProductCard;

// Usage in Page1.jsx and Page2.jsx:
import ProductCard from './components/ProductCard';

<ProductCard 
  image={product.image} 
  name={

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change