Writing Modular code in ReactJS

It could become challenging to maintain and modify the code when a React application expands in size and complexity. Writing modular code can help you avoid repeating code and make it easier to manage and maintain.

In this article, we'll discuss some tips for writing modular code in React.

Divide Your Code into Smaller Components

Dividing your code into smaller, reusable components is one of the best ways to write modular code in React. Each component in your application should stand for a single, independent piece of functionality that can be applied to various parts of the system.

You could make separate components for the form fields, form submission, and error handling, for instance, if you have a registration form. It is simpler to change and maintain because each component can be developed and tested independently.

Use Higher-Order Components

Functions that take a component as an argument and return another component are known as higher-order components (HOCs). They can be used to enhance a component's functionality or alter its behaviour without changing its source code.

For instance, you could develop a HOC that wraps a component and, prior to rendering, adds authentication or authorization checks. Your code will become more modular as a result of being able to reuse the authentication and authorization logic across various components.

const requireAuthentication = (Component) => {
  const isAuthenticated = true; // Replace with actual authentication check

  return isAuthenticated ? <Component /> : <p>Please log in to access this page.</p>;
};

const HomePage = () => {
  return <div>Welcome to the home page!</div>;
};

export default requireAuthentication(HomePage);

Use React Hooks

React Hooks were introduced in version 16.8 to give functional components a way to use state and other React features. By enabling the reuse of stateful logic across multiple components, hooks can assist you in writing more modular code.

You could, for instance, create custom hook that retrieves information from an API and provides the data and the loading state to any component that uses it.

import { useState, useEffect } from "react";

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const data = await response.json();
      setData(data);
      setLoading(false);
    };

    fetchData();
  }, [url]);

  return { data, isLoading };
};

const UserList = () => {
  const { data, isLoading } = useFetchData("https://jsonplaceholder.typicode.com/users");

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

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

export default UserList;

Use React Context

React Context allows you to pass data down the component tree without having to pass props through each level of the tree. This allows you to encapsulate and reuse logic across multiple components, making your code more modular.

You can, for example, create a UserContext context that makes the user data available to any component that uses it.

import React, { createContext, useContext } from "react";

// Create a new context for the user data
const UserContext = createContext();

// Create a new component that will hold the user data
const UserProvider = ({ children }) => {
  const user = { name: "John Doe", email: "john.doe@example.com" };
  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
};

// Create a new component that will use the user data
const Profile = () => {
  // Use the useContext hook to access the user data
  const user = useContext(UserContext);

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

// Render the components
const App = () => {
  return (
    <UserProvider>
      <Profile />
    </UserProvider>
  );
};

In this example, the UserProvider component is responsible for holding the user data and making it available to any child components that need it. The Profile component is a child component that uses the useContext hook to access the user data from the UserContext context.

By wrapping the Profile component in the UserProvider, the user data can be accessed by any child components without the need for prop drilling.

Some more methods (not react specific)

Other than the above method, you could always follow some of the suggestions:

Using Component Libraries - Component Themes are an excellent way to ensure consistency throughout your entire React application. You can define a set of styles for all your components and then reuse those styles throughout your code.
Common Constants - You can also define common constants that will be used throughout your React app. For example, if you're developing a shopping cart app, you might want to define constants for product prices and shipping rates.
Utils functions - Defining some reusable logics, like data conversions or date formatter method to bring consistency across your application.

Conclusion

Writing modular code in React can be difficult, but it is necessary for creating scalable and maintainable applications. It may take more time up front, but it saves time and effort later on by making development, testing, and debugging faster and easier. Developers can write high-quality, maintainable, and efficient ReactJS code that is simple to understand, test, and maintain by following the suggestions provided in this post.

Blog