Refactoring Legacy Code with React Best Practices: Before and After

A practical case study: How to transform a messy React project into a maintainable codebase

---

Project Background

Original Codebase State

• Project Scale: 5,000+ lines of code
• Tech Stack: React 15 + Redux + jQuery
• Maintenance Cost: Every change affects multiple components
• Team Situation: New members need 2 weeks to onboard

Pain Point Analysis

Code Quality Issues

• Components nested too deeply (deepest: 8 levels)
• Chaotic state management (Redux mixed with component state)
• Lack of type checking (all JavaScript)
• Disorganized styles (CSS-in-JS + traditional CSS)

Performance Issues

• Component re-rendering
• No code splitting
• Large bundle size (2MB+)

Refactoring Strategy

🎯 Goal Setting

Short-term Goals (1 month)

• Implement code splitting
• Establish type system
• Optimize core components

Long-term Goals (3 months)

• Complete migration to React 18
• Establish test coverage
• Implement CI/CD

🔧 Technology Selection

Core Upgrades

• React 15 → React 18
• JavaScript → TypeScript
• Redux → Zustand
• jQuery → React Hooks

Build Tools

• Webpack 4 → Vite
• ESLint + Prettier
• Husky + lint-staged

Implementation Process

Phase 1: Infrastructure (Week 1-2)

1. Environment Setup

# Install dependencies
npm install @types/react @types/react-dom typescript

# Configure TypeScript
npx tsc --init

2. Type System Migration

• Add type definition files
• Gradually add type annotations
• Use any as transition

3. State Management Refactoring

• Identify global state
• Create Zustand store
• Remove jQuery dependencies

Phase 2: Component Refactoring (Week 3-4)

1. Component Splitting

// Before refactoring
class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <Sidebar />
        <MainContent />
        <Footer />
      </div>
    );
  }
}

// After refactoring
const App = () => {
  return (
    <Layout>
      <Header />
      <Content>
        <Sidebar />
        <MainContent />
      </Content>
      <Footer />
    </Layout>
  );
};

2. Hooks Refactoring

• Replace class components with function components
• Encapsulate logic in custom Hooks
• Use React.memo for performance optimization

Phase 3: Performance Optimization (Week 5-6)

1. Code Splitting

// Dynamic imports
const LazyComponent = React.lazy(() => import('./LazyComponent'));

// Usage
<Suspense fallback={<Loading />}>
  <LazyComponent />
</Suspense>

2. Performance Optimization

• React.memo usage
• useCallback/useMemo optimization
• Virtual scrolling implementation

Code Comparison

Before Refactoring

// ComponentA
class ComponentA extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: true,
      error: null
    };
  }

  componentDidMount() {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data, loading: false });
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  }

  render() {
    const { data, loading, error } = this.state;

    if (loading) return <Loading />;
    if (error) return <Error />;

    return (
      <div className="component-a">
        <h1>Data List</h1>
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

After Refactoring

// Custom hook
const useFetchData = (url: string) => {
  const [data, setData] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);

  return { data, loading, error };
};

// Component
const ComponentA: React.FC = () => {
  const { data, loading, error } = useFetchData('/api/data');

  if (loading) return <Loading />;
  if (error) return <Error />;

  return (
    <div className="component-a">
      <h1>Data List</h1>
      <ul>
        {data.map((item: any) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default React.memo(ComponentA);

Results Data

📊 Technical Metrics Comparison

Metric	Before	After	Improvement
Lines of code	5,238	3,812	-27%
Bundle size	2.1MB	890KB	-58%
First paint time	3.2s	1.1s	-66%
Component reuse rate	12%	68%	+467%
Test coverage	0%	85%	+∞

📈 Team Efficiency Improvement

Development Efficiency

• New feature development: 2 weeks → 3 days
• Bug fix time: 1 day → 2 hours
• Code review pass rate: 60% → 95%

Maintenance Cost

• Documentation updates: 1 day → 2 hours
• New member onboarding: 2 weeks → 3 days
• Production incident response: 4 hours → 30 minutes

Best Practices

1. Progressive Refactoring

Principle: Keep the system running while gradually improving

Week 1-2: Infrastructure
Week 3-4: Core components
Week 5-6: Performance optimization
Week 7-8: Test coverage

2. Test-Driven

Unit Test Coverage

// Example test
describe('ComponentA', () => {
  it('should render loading state', () => {
    render(<ComponentA />);
    expect(screen.getByText('Loading...')).toBeInTheDocument();
  });

  it('should render data list', async () => {
    render(<ComponentA />);
    await waitFor(() => {
      expect(screen.getByText('Data List')).toBeInTheDocument();
    });
  });
});

3. Code Standards

ESLint Configuration

{
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "typescript/no-explicit-any": "warn",
    "import/no-unresolved": "error"
  }
}

Lessons Learned

1. Communication is Key

• Communicate thoroughly before refactoring
• Help the team understand refactoring value
• Sync progress regularly

2. Documentation is Essential

• Record refactoring decisions
• Update technical documentation
• Establish knowledge base

3. Testing is the Safety Net

• Unit tests for core logic
• E2E tests for user flows
• Performance tests for optimization validation

Tool Recommendations

Code Quality

• ESLint: Code standard checking
• Prettier: Code formatting
• TypeScript: Type checking

Testing Tools

• Jest: Unit test framework
• React Testing Library: React component testing
• Cypress: E2E testing

Performance Analysis

• React DevTools: Component performance analysis
• Chrome DevTools: Network performance analysis
• Webpack Bundle Analyzer: Bundle size analysis

Next Steps

Short-term Goals

• Complete TypeScript migration for remaining components
• Establish comprehensive test coverage
• Implement continuous integration

Long-term Goals

• Microservice architecture migration
• Performance monitoring system
• Documentation automation

Summary

This refactoring proved several key points:

1. Progressive refactoring is feasible - No downtime, gradual improvement
2. Type system is necessary - TypeScript significantly improved code quality
3. Performance optimization has visible effects - Bundle size halved, load time reduced by 3/4
4. Team efficiency significantly improved - Faster onboarding, quicker bug fixes

Refactoring isn't a one-time effort, but a continuous improvement process. The key is sticking to principles, maintaining communication, and valuing testing.

---

Key Takeaways

• Progressive refactoring - Keep the system running
• Type system - Code quality assurance
• Performance optimization - Start with splitting
• Test coverage - Refactoring foundation
• Communication and documentation - Equally important

Tool Chain

• TypeScript + React 18
• Zustand + React Hooks
• Vite + ESLint + Prettier
• Jest + React Testing Library

Expected Benefits

• Code lines reduced by 27%
• Bundle size reduced by 58%
• First paint time reduced by 66%
• Team efficiency improved by 300%

---

Article ID: 09/10

Estimated reading time: 7 minutes

Keywords: React Refactoring, TypeScript, Code Quality, Performance Optimization

---

Tags: #react #typescript #refactoring #cleancode #webdev #javascript #bestpractices