Building Modern React Applications with TypeScript

Modern React development has evolved significantly with the introduction of hooks, context, and TypeScript integration. This comprehensive guide explores best practices for creating scalable and maintainable React applications using TypeScript.

The Evolution of React Development

React has transformed from a simple UI library into a comprehensive ecosystem for building complex web applications. According to the 2023 Stack Overflow Developer Survey, React remains the second most popular web framework, used by 40.58% of developers worldwide^[1]. The integration of TypeScript has been a game-changer, with 87% of developers expressing interest in continuing to use TypeScript^[2].

Engineering team collaborating around laptops and design sketches — Collaborative teams that blend design and engineering disciplines reduce handoff issues by 23% (McKinsey Digital, 2023).

Key Statistics

• 40.58% of developers use React (Stack Overflow Survey 2023)
• 87% want to continue using TypeScript (State of JS 2022)
• 38% reduction in bugs when using TypeScript (Airbnb case study)
• 15% improvement in developer productivity with TypeScript

Component Architecture Best Practices

1. Functional Components with TypeScript Interfaces

Modern React development heavily favors functional components with hooks. Here's how we structure components at LumiSoft:

interface UserCardProps {
  user: {
    id: string;
    name: string;
    email: string;
    avatar?: string;
  };
  onEdit?: (userId: string) => void;
  className?: string;
}

const UserCard: React.FC<UserCardProps> = ({ 
  user, 
  onEdit, 
  className = "" 
}) => {
  const [isLoading, setIsLoading] = useState(false);
  
  const handleEdit = useCallback(() => {
    if (onEdit) {
      setIsLoading(true);
      onEdit(user.id);
      setIsLoading(false);
    }
  }, [onEdit, user.id]);

  return (
    <div className={`card ${className}`}>
      <img src={user.avatar || '/default-avatar.png'} alt={user.name} />
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      {onEdit && (
        <button onClick={handleEdit} disabled={isLoading}>
          {isLoading ? 'Saving...' : 'Edit'}
        </button>
      )}
    </div>
  );
};

2. Custom Hooks for Logic Separation

Custom hooks allow us to separate business logic from UI components, making code more reusable and testable:

// useApi.ts
interface ApiResponse<T> {
  data: T | null;
  loading: boolean;
  error: string | null;
  refetch: () => void;
}

function useApi<T>(url: string): ApiResponse<T> {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const fetchData = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await fetch(url);
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    } finally {
      setLoading(false);
    }
  }, [url]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return { data, loading, error, refetch: fetchData };
}

State Management Patterns

Context API with TypeScript

For medium-scale applications, React's Context API provides excellent state management when properly typed:

// AuthContext.tsx
interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

interface AuthState {
  user: User | null;
  isAuthenticated: boolean;
  isLoading: boolean;
}

interface AuthContextType extends AuthState {
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  updateUser: (updates: Partial<User>) => void;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export const useAuth = (): AuthContextType => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
};

export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ 
  children 
}) => {
  const [state, setState] = useState<AuthState>({
    user: null,
    isAuthenticated: false,
    isLoading: true
  });

  const login = async (email: string, password: string) => {
    setState(prev => ({ ...prev, isLoading: true }));
    try {
      const response = await authApi.login(email, password);
      setState({
        user: response.user,
        isAuthenticated: true,
        isLoading: false
      });
    } catch (error) {
      setState(prev => ({ ...prev, isLoading: false }));
      throw error;
    }
  };

  const logout = () => {
    setState({
      user: null,
      isAuthenticated: false,
      isLoading: false
    });
  };

  return (
    <AuthContext.Provider value={{ ...state, login, logout, updateUser }}>
      {children}
    </AuthContext.Provider>
  );
};

Performance Optimization Techniques

Memoization and React.memo

Proper memoization can significantly improve application performance, especially in data-heavy applications:

// Expensive list component with proper memoization
interface ListItemProps {
  item: {
    id: string;
    name: string;
    value: number;
  };
  onSelect: (id: string) => void;
}

const ListItem = React.memo<ListItemProps>(({ item, onSelect }) => {
  const handleClick = useCallback(() => {
    onSelect(item.id);
  }, [item.id, onSelect]);

  // Expensive calculation memoized
  const formattedValue = useMemo(() => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD'
    }).format(item.value);
  }, [item.value]);

  return (
    <div onClick={handleClick} className="list-item">
      <h4>{item.name}</h4>
      <span>{formattedValue}</span>
    </div>
  );
});

// Parent component
const ExpensiveList: React.FC<{ items: ListItem[] }> = ({ items }) => {
  const [selectedId, setSelectedId] = useState<string | null>(null);
  
  // Memoize callback to prevent unnecessary re-renders
  const handleItemSelect = useCallback((id: string) => {
    setSelectedId(id);
  }, []);

  // Memoize filtered items
  const filteredItems = useMemo(() => {
    return items.filter(item => item.value > 0);
  }, [items]);

  return (
    <div>
      {filteredItems.map(item => (
        <ListItem 
          key={item.id}
          item={item}
          onSelect={handleItemSelect}
        />
      ))}
    </div>
  );
};

Testing Strategies

According to the Testing Trophy concept by Kent C. Dodds, integration tests provide the best return on investment. Here's how we implement comprehensive testing at LumiSoft:

// UserCard.test.tsx
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { vi } from 'vitest';
import { UserCard } from './UserCard';

const mockUser = {
  id: '1',
  name: 'John Doe',
  email: 'john@example.com',
  avatar: 'avatar-url.jpg'
};

describe('UserCard', () => {
  it('renders user information correctly', () => {
    render(<UserCard user={mockUser} />);
    
    expect(screen.getByText('John Doe')).toBeInTheDocument();
    expect(screen.getByText('john@example.com')).toBeInTheDocument();
    expect(screen.getByAltText('John Doe')).toHaveAttribute('src', 'avatar-url.jpg');
  });

  it('calls onEdit when edit button is clicked', async () => {
    const mockOnEdit = vi.fn();
    render(<UserCard user={mockUser} onEdit={mockOnEdit} />);
    
    const editButton = screen.getByText('Edit');
    fireEvent.click(editButton);
    
    await waitFor(() => {
      expect(mockOnEdit).toHaveBeenCalledWith('1');
    });
  });

  it('shows loading state during edit', async () => {
    const mockOnEdit = vi.fn(() => new Promise(resolve => setTimeout(resolve, 100)));
    render(<UserCard user={mockUser} onEdit={mockOnEdit} />);
    
    const editButton = screen.getByText('Edit');
    fireEvent.click(editButton);
    
    expect(screen.getByText('Saving...')).toBeInTheDocument();
    expect(editButton).toBeDisabled();
  });
});

Applying These Patterns in Practice

These patterns are a starting point rather than a rulebook. How much structure pays off depends on the size of the product, the team and how long the code needs to live. A sensible order of priorities: type the boundaries first (API responses, props and form state), keep components small and focused, and add tests where a bug would be expensive.

Future Trends and Recommendations

The React ecosystem continues to evolve rapidly. Based on current trends and our experience at LumiSoft, here are key areas to focus on:

Server Components

React Server Components are reshaping how we think about data fetching and rendering, offering significant performance improvements for data-heavy applications.

Concurrent Features

React 18's concurrent features like Suspense and useTransition are becoming essential for creating smooth, responsive user experiences.

Conclusion

Building modern React applications with TypeScript requires a thoughtful approach to architecture, state management, and performance optimization. The patterns and practices outlined in this article are widely used in production React applications and continue to evolve with the ecosystem.

The combination of React's flexibility and TypeScript's type safety creates a powerful foundation for building scalable, maintainable applications. As the ecosystem continues to mature, staying updated with best practices and new features remains crucial for long-term success.

Sources & Further Reading

[1]

Stack Overflow Developer Survey 2023 - Web Frameworks

[2]

State of JS 2022 - JavaScript Flavors

[3]

React v18.0 Official Documentation

[4]

Kent C. Dodds - The Testing Trophy