El Mahfoud Bouatim

Posted on Jan 2

🚀 React Best Practices for Scalable Frontends: Part 5 – Maintainability

#react #testing #javascript

🚀 Introduction

Welcome back, friend! You’ve reached the final article in our React Best Practices for Scalable Frontend series. Throughout this journey, we’ve explored key principles such as performance optimization, state management, project structure and code splitting. While we've covered many essential best practices, there's always room for discovery—feel free to share any strategies we might have missed!

As mentioned in the first article, building a scalable frontend application isn’t a one-time task but an ongoing process. It’s a series of deliberate choices and iterative improvements that ultimately lead to a robust and maintainable application. Along the way, you'll inevitably encounter bugs—some will be caught during development, while others may sneak into production. In this final installment, we’ll focus on practices to help you handle bugs and issues more effectively, making your development journey smoother.

🛡️ Type Safety with TypeScript

React, as a library, offers immense flexibility—it doesn’t impose strict rules on how you should structure or write your code. While this freedom is empowering, it can also introduce challenges, especially as your codebase grows.

Enforcing type safety using TypeScript is one of the most effective ways to enhance code quality and reduce runtime errors. With TypeScript, you can catch type-related bugs early during development, long before they reach production. This is especially powerful when combined with tools like ESLint, which can further enforce best practices and coding standards.

✅ Advantages of Using TypeScript in React:

Early Bug Detection: Catch type errors during development rather than at runtime.
Clearer Code Contracts: Enforce clear expectations for props and component interfaces.
Easier Refactoring: Changes to your codebase become safer and more predictable.
Easier Maintainability in the Future: With clear type definitions, maintaining and scaling the codebase over time becomes significantly easier.

💻 Example of Using TypeScript in React

Here’s a simple example of using TypeScript with a React component:

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

// Usage
const handleClick = () => {
  console.log('Button clicked!');
};

<Button label="Click Me" onClick={handleClick} />;

Explanation:

The ButtonProps interface defines the expected label (a string) and onClick (a function) props.
The Button component uses these props with TypeScript, ensuring proper usage and catching errors during development.
The usage example ensures type-safe usage of the Button component.

✍️ Tips for Using TypeScript Effectively in React:

Define Explicit Types for Props and State: Avoid using any as a type.
Leverage Utility Types: Use TypeScript’s utility types like Partial, Pick, and Record to simplify type definitions.
Use TypeScript with ESLint: Combine ESLint with TypeScript rules to enforce consistent coding styles.
Adopt Strict Mode: Enable strict mode in your tsconfig.json for maximum type safety.

By embracing TypeScript, you not only improve the reliability of your application but also make it easier for your team to collaborate and scale the project efficiently.

🚨 Error Boundaries

Building an application often involves trial and error until everything works as expected. During development, encountering a red screen full of error messages and stack traces is a normal part of the process. However, delivering such an experience to end users in a production environment is far from ideal. Thankfully, React provides a powerful feature to handle these scenarios: Error Boundaries.

📕 What are Error Boundaries?

In simple terms, an Error Boundary is a special React component that catches JavaScript errors in its child component tree during rendering, in lifecycle methods, and in constructors of child components. If an error is caught, instead of crashing the entire application, the Error Boundary displays a fallback UI (which you define) while gracefully handling the error behind the scenes.

❓How do Error Boundaries work?

Error Boundaries rely on two lifecycle methods:

static getDerivedStateFromError(error): Used to render a fallback UI after an error is detected.
componentDidCatch(error, info): Used to log error details or perform side effects like sending error reports.

An Error Boundary typically looks like this:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error caught by ErrorBoundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong. Please try again later.</h1>;
    }
    return this.props.children;
  }
}

You can then wrap your components with the ErrorBoundary:

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

✅ Advantages of Error Boundaries

User-Friendly Experience: Instead of a broken UI or a cryptic error screen, users see a friendly fallback UI.
Error Isolation: Errors are contained within specific components, preventing them from crashing the entire application.
Error Reporting: Errors can be logged and monitored centrally, aiding debugging and maintenance.
Graceful Degradation: Applications can continue functioning partially even if one component fails.

🚑 When Error Boundaries Don’t Work

While Error Boundaries are powerful, they have some limitations:

They do not catch errors in event handlers (use try-catch for those).
They do not catch errors in asynchronous code (e.g., setTimeout, fetch).
They do not catch errors in server-side rendering (SSR).
They do not catch errors inside themselves.

✍️ Tips for Using Error Boundaries

Create multiple Error Boundaries for different parts of your app to avoid a single fallback UI covering the entire application.
Log error details appropriately for better tracking.
Customize your fallback UI to align with your app's design.

💻 Example Use Case

function App() {
  return (
    <div>
      <ErrorBoundaryProfile>
        <UserProfile />
      </ErrorBoundaryProfile>
      <ErrorBoundarySettings>
        <SettingsPanel />
      </ErrorBoundarySettings>
    </div>
  );
}

In the above example, errors in UserProfile won't affect SettingsPanel and vice versa.

🧪 Testing

Testing is a crucial part of building reliable and maintainable React applications. It encompasses various layers, including manual testing, unit testing, integration testing, and end-to-end (E2E) testing. While we might not all be expert testers, adopting best practices ensures we deliver a clean and stable version of our app to production. This section highlights key strategies and tips for effective testing.

🔧 Manual Testing

Manual testing is often the first step in validating your application. It involves interacting with your app directly in the browser to verify both functional requirements (e.g., features working as expected) and non-functional requirements (e.g., performance, responsiveness). Below are some best practices for effective manual testing:

Test Happy Paths: Ensure the primary user workflows (e.g., form submissions, navigation) function correctly.
Test Error Paths: Verify how the app behaves under edge cases and invalid inputs.
Use Developer Tools: Keep your browser's Developer Tools open and check the console for errors.
Monitor Network Panel: Look for slow API calls or failed requests.
Leverage React Profiler: Analyze the performance of your components.
Use Storybook: Isolate and test individual components in an isolated environment.

What is Storybook?
Storybook is an open-source tool for developing UI components in isolation. It allows you to build, test, and showcase components outside of your main application. With Storybook, you can create a library of reusable components, test their behavior with different props and states, and ensure they meet design requirements.

By following these steps, you'll gain confidence that your app performs as expected before automating your testing process.

⚙️ Unit Testing

Once you've validated your app manually, the next step is to write unit tests. These focus on testing individual components or functions in isolation.

✅ Best Practices for Unit Testing:

Write tests for pure functions and critical components.
Use libraries like Jest and React Testing Library.
Avoid testing implementation details; focus on user interactions and outputs.
Use mock data to simulate different scenarios.

💻 Example of Unit Testing a Component

// Button.js
export const Button = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

// Button.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import ButtonComponent from '../components/ButtonComponent';

describe('ButtonComponent', () => {
  test('renders the button with the correct label', () => {
    render(<ButtonComponent label="Click me" onClick={() => {}} />);

    const button = screen.getByTestId('button');
    expect(button).toBeInTheDocument();
    expect(button).toHaveTextContent('Click me');
  });

  test('fires the click event when clicked', () => {
    const handleClick = jest.fn();
    render(<ButtonComponent label="Click me" onClick={handleClick} />);

    const button = screen.getByTestId('button');
    fireEvent.click(button);

    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

In this example, the unit test verifies that clicking the button triggers the onClick handler.

⛓ Integration Testing

Integration tests ensure that multiple components and modules work together seamlessly. They help detect issues in component interactions, such as how a Search Component affects a Results List.

✅ Best Practices for Integration Testing:

Test common user flows across multiple components.
Mock external dependencies like APIs.
Use React Testing Library for user-centric testing.
Verify components' interactions and state updates.

💻 Example of Integration Testing

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import SearchResultsPage from '../components/SearchResultsPage';

// The SearchResultPage is composed of both components
// <div>
//   <SearchComponent onSearch={handleSearch} />
//   <ResultComponent results={results} />
// </div>

describe('SearchResultsPage Integration Test', () => {
  test('search term updates results correctly', () => {
    render(<SearchResultsPage />);

    const searchInput = screen.getByTestId('search-input');
    const searchButton = screen.getByTestId('search-button');
    const resultsList = screen.getByTestId('results-list');

    // Initial state: results list is empty
    expect(resultsList).toBeEmptyDOMElement();

    // Enter a search term
    fireEvent.change(searchInput, { target: { value: 'Apple' } });
    fireEvent.click(searchButton);

    // Expect the results list to show "Apple"
    expect(screen.getByText('Apple')).toBeInTheDocument();
    expect(resultsList).not.toContainHTML('Banana');
    expect(resultsList).not.toContainHTML('Orange');

This example demonstrates how integration testing verifies interactions between the search field and the results display.

🤖 Automating Tests with CI/CD

To ensure consistent and error-free deployments, set up a CI/CD pipeline to automatically run your unit and integration tests whenever code is pushed or merged.

Use tools like GitHub Actions, Jenkins, or CircleCI.
Run tests on every pull request to prevent regressions.
Include test reports in your pipeline for better visibility.

By automating your tests, you'll reduce manual effort and catch issues early in the development process.

🎓 Conclusion

Building scalable React applications requires a thoughtful approach to type safety, error handling, and testing. By adopting TypeScript, leveraging Error Boundaries, and implementing robust testing strategies, you can create applications that are resilient, maintainable, and user-friendly. Remember, best practices are not one-size-fits-all, adapt them to suit your team and project needs. Keep learning, stay curious, and happy coding! 🚀💻

DEV Community