Refactoring Your React/Next.js App: Keeping Your Code Clean and Maintainable

Building web applications with React and Next.js can be an exciting and productive experience. However, as your application grows in complexity, the initial code structure might become harder to understand and maintain. This is where refactoring comes in. Refactoring refers to the process of improving the internal structure of your code without affecting its functionality.

Benefits of Refactoring:

• Improved Readability: Clean and organized code is easier to understand for both you and other developers, leading to smoother collaboration and easier debugging.

• Reduced Maintenance Cost: Well-structured code takes less time and effort to maintain and update, saving you valuable resources in the long run.

• Enhanced Performance: Refactoring can sometimes lead to unexpected performance improvements, especially when dealing with complex logic and unnecessary code duplication.

Specific Refactoring Techniques for React/Next.js

Component Composition

Break down large components into smaller, reusable pieces with specific functionalities. This promotes modularity and makes your code easier to test and reuse.

Here's an example of how you can break down a large component into smaller, reusable pieces using component composition:

Before Refactoring (Large Component):

function ProductCard(props) {
  const { product, addToCart } = props;

  return (
    <div className="product-card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>{product.description}</p>
      <span className="price">${product.price}</span>
      <button onClick={() => addToCart(product)}>Add to Cart</button>
    </div>
  );
}

This component renders a product card with its image, name, description, price, and an "Add to Cart" button. While it functions well initially, it might become cumbersome to maintain and reuse as your application grows.

After Refactoring (Component Composition):

ProductImage:

function ProductImage({ src, alt }) {
  return <img src={src} alt={alt} />;
}

ProductDetails:

function ProductDetails({ name, description, price }) {
  return (
    <>
      <h3>{name}</h3>
      <p>{description}</p>
      <span className="price">${price}</span>
    </>
  );
}

AddToCartButton:

function AddToCartButton({ product, onClick }) {
  return (
    <button onClick={() => onClick(product)}>Add to Cart</button>
  );
}

Refactored ProductCard:

function ProductCard({ product, addToCart }) {
  return (
    <div className="product-card">
      <ProductImage src={product.image} alt={product.name} />
      <ProductDetails name={product.name} description={product.description} price={product.price} />
      <AddToCartButton product={product} onClick={addToCart} />
    </div>
  );
}

Extract Hooks.

Move complex logic and state manipulation outside of functional components into custom hooks. This keeps your components clean and focused on UI rendering.

Here's an example of how you can extract complex logic and state manipulation into a custom hook:

Before Refactoring:

function ProductList(props) {
  const [products, setProducts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const response = await fetch("https://api.example.com/products");
        const data = await response.json();
        setProducts(data);
      } catch (error) {
        setError(error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchProducts();
  }, []);

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

This component fetches a list of products from an API and displays them in a list. While it works, the component logic becomes cluttered with state management and data fetching logic.

After Refactoring:

useFetchProducts Hook:

function useFetchProducts() {
  const [products, setProducts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const response = await fetch("https://api.example.com/products");
        const data = await response.json();
        setProducts(data);
      } catch (error) {
        setError(error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchProducts();
  }, []);

  return { products, isLoading, error };
}

This custom hook encapsulates the logic for fetching products, managing loading and error states, and returning the necessary data.

Refactored ProductList:

function ProductList() {
  const { products, isLoading, error } = useFetchProducts();

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

The ProductList component now uses the useFetchProducts hook to retrieve the data and handle loading and error states, keeping its focus on rendering the UI based on the provided data.

Leverage Next.js Data Fetching

Utilize Next.js's built-in features like getStaticProps and getServerSideProps to efficiently fetch data on the server for server-side rendering or at build time for static generation, optimizing performance and SEO.

Next.js provides two powerful features, getStaticProps and getServerSideProps, for fetching data on the server, each serving different purposes:

getStaticProps - Static Generation:

• Fetches data at build time for each page.

• Ideal for pre-rendering pages that are static and SEO-critical.

• Great for content that doesn't change frequently.

// pages/blog/[slug].js

export async function getStaticProps({ params }) {
  const { slug } = params;
  const response = await fetch(`https://api.example.com/blog/${slug}`);
  const data = await response.json();

  return {
    props: {
      post: data,
    },
  };
}

function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export default BlogPost;

This example demonstrates getStaticProps fetching blog post data by slug during the build process. The fetched data is then passed as props to the BlogPost component. This allows the page to be pre-rendered with the latest content, improving initial load time and SEO.

getServerSideProps - Server-side Rendering (SSR):

• Fetches data on each request to the server.

• Ideal for pages with dynamic content or that require user-specific data.

• Good for content that changes frequently or requires authentication.

// pages/profile.js

export async function getServerSideProps(context) {
  const { req } = context;
  const userId = req.cookies.userId;

  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data = await response.json();

  return {
    props: {
      user: data,
    },
  };
}

function Profile({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default Profile;

This example demonstrates getServerSideProps fetching user data based on the user ID stored in a cookie. This ensures that each user sees their specific profile information on each request.

Choosing betweengetStaticProps and getServerSideProps:

• For SEO-critical, static content, prioritizegetStaticProps for optimal performance and SEO benefits.

• For frequently changing content or user-specific data, considergetServerSideProps for dynamic generation.

Utilize Linters and Static Type Checkers

Tools like ESLint and TypeScript can help you catch potential errors and enforce code style guidelines, leading to cleaner and more predictable code.

Imagine you're building a simple React component to display a product card with its name, price, and an "Add to Cart" button. Here's how ESLint and TypeScript can help you write cleaner and more predictable code:
Without ESLint and TypeScript:

function ProductCard(props) {
  const { name, price, addToCart } = props;
  return (
    <div className="product-card">
      <h3>{name}</h3>
      <p>${price}</p>
      <button onClick={addToCart}>Add to Cart</button>
    </div>
  );
}

This code works functionally, but it lacks some best practices and might be prone to errors:

• Missing type definitions: The code doesn't explicitly define the types for props, making it unclear what data the component expects.

• Potential errors: Typos or incorrect prop usage might go unnoticed until runtime.

• Inconsistent formatting: The code style might vary, making it harder to read and maintain.

With ESLint and TypeScript:

interface ProductProps {
  name: string;
  price: number;
  addToCart: (productId: string) => void; // Function signature with specific type for argument
}

function ProductCard(props: ProductProps) {
  const { name, price, addToCart } = props;
  return (
    <div className="product-card">
      <h3>{name}</h3>
      <p>${price}</p>
      <button onClick={() => addToCart("product-id")}>Add to Cart</button> // Explicit argument for clarity
    </div>
  );
}

Improvements:

• Type definitions: We define an interface ProductProps to specify the expected types for each prop.

• Error catching: TypeScript can catch potential type errors during development, preventing runtime issues.

• Consistent formatting: ESLint can enforce consistent code formatting through rules and configurations.

• Clarity: Explicit function signature for addToCart and a specific argument value improve code readability.

Benefits:

• Reduced Errors: Catching errors early in the development process saves time and prevents unexpected issues in production.

• Improved Readability: Clearer code structure and consistent formatting enhance maintainability and collaboration.

• Increased Confidence: Type checking and enforced rules give you more confidence in the code's correctness and robustness.

Consider Third-Party Libraries

Look for well-maintained libraries that can handle specific functionalities like state management (e.g., Redux) or data fetching (e.g., Axios) instead of reinventing the wheel.

Building complex web applications requires efficient solutions for various functionalities. Instead of reinventing the wheel, consider using well-maintained libraries that offer robust features and active communities. Here are some examples:

1. State Management:

• Redux: A popular library for managing application state in a predictable and scalable way. It provides a central store holding the state and a defined way to update it through actions and reducers.

• MobX: An alternative state management library that promotes reactive updates, where changes in one part of the state automatically trigger updates in other connected parts.

2. Data Fetching:

• Axios: A simple and promise-based HTTP client for making API requests in JavaScript. It provides a clean interface for fetching data and handling responses.

• React Query: A library built specifically for React that simplifies data fetching and caching, offering features like automatic refetching on data updates and optimistic updates during mutations.

Benefits of using established libraries:

• Reduced development time: Leverage pre-built solutions instead of building everything from scratch.

• Improved code quality: Benefit from tested, maintained, and community-supported libraries.

• Enhanced maintainability: Easier to understand and manage code thanks to established patterns and documentation.

• Community support: Access resources, tutorials, and assistance from the library's community.

Choosing the right library:

• Evaluate your project's requirements: Consider the complexity of your state management needs or the specific features required for data fetching.

• Research and compare options: Explore different libraries, their features, documentation, and community support before making a decision.

• Start small and iterate: Begin with a specific library for a particular functionality and gradually integrate others as needed.