How to be Better in React Code Reusability - Part1

A brief overview of React and its popularity

React is one of the most popular front-end JavaScript frameworks for building user interfaces. Developed by Facebook, React has gained a vast following in the web development community due to its simplicity, flexibility, and scalability. React's popularity can be attributed to its component-based architecture, which allows developers to break down complex user interfaces into small, reusable parts. These smaller components can then be composed to create more extensive and more complex UIs quickly.

However, as the size and complexity of React applications grow, it becomes increasingly challenging to manage the codebase effectively. This is where code reusability comes into play. Code reusability in React refers to the practice of writing reusable code that can be shared across different parts of an application, and even across different applications. It helps developers save time, reduce errors, and improve the scalability and maintainability of their applications.

In this article, we will explore how to implement code reusability in React, its importance in efficient and scalable development, and best practices for implementing code reusability in React projects. By the end of this article, you will have a better understanding of how to incorporate code reusability in your React projects for more efficient and scalable applications.

React components and their importance in reusability

React components are a fundamental part of achieving code reusability in a React application. This, in turn, leads to more efficient and scalable development.

When components are reusable, they can be easily imported and integrated into different parts of an application or across different applications. This results in more streamlined development and faster iterations of the application.

Comparison of Functional and Class Components in Terms of Reusability

Functional and class components are two types of components in React, and both have their own advantages and disadvantages when it comes to reusability.

Functional Components

Functional components are simpler and more straightforward than class components. They take in props as inputs and return the UI elements. Since they don't have state or lifecycle methods, they are easier to test and maintain.

One significant advantage of functional components is that they are more concise and easier to read, which can be helpful in understanding the code and making changes to it. They can also be used in higher-order components (HOCs), which are reusable functions that wrap a component and provide additional functionality.

Here is an example of a simple functional component that displays a welcome message:

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

The above component can be reused throughout the application by passing different values for the name prop.

Class Components

Class components, on the other hand, have more functionality and are more powerful than functional components. They have state, which allows them to manage their data and update their UI based on changes in that data. They also have lifecycle methods, which allow them to perform certain actions at specific points in their lifecycle, such as when the component is mounted or unmounted.

The disadvantage of class components is that they are more verbose and harder to read than functional components. They can also be more challenging to maintain and test due to their state and lifecycle methods.

However, class components can be highly reusable if designed correctly. By separating their state and functionality into different methods, class components can become more modular and easier to reuse. They can also be used in HOCs and render props, just like functional components.

Here is an example of a class component that displays a countdown timer:

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: props.seconds };
  }

  tick() {
    this.setState((state) => ({
      seconds: state.seconds - 1,
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <div>Seconds remaining: {this.state.seconds}</div>;
  }
}

In the above component, the state is managed in the constructor and the tick() method, while the lifecycle methods componentDidMount() and componentWillUnmount() handle starting and stopping the timer. The component can be reused by passing different values for the seconds prop.

Examples of Reusable Components in React

Here are some code examples of reusable components in various React apps:

Button Component

A button component is a simple example of a reusable component that can be used throughout an application. Buttons are a common UI element in most applications, and creating a separate component for them can simplify the code and make it more reusable.

Here is an example of a button component in React:

function Button(props) {
  return <button onClick={props.onClick}>{props.label}</button>;
}

In the above component, the onClick and label props can be passed in when the component is used to customize the button's behavior and appearance.

Modal Component

A modal component is another example of a reusable component that can be used in multiple parts of an application. Modals are commonly used to display additional information or to prompt the user to take an action.

Here is an example of component creation of a modal component in React:

function Modal(props) {
  return (
    <div className="modal">
      <div className="modal-content">{props.children}</div>
    </div>
  );
}

In the above component, the children prop is used to render the content of child components of the modal. This allows the modal to be easily customized and used in different parts of the application.

Form Input Component

Form input components are a type of reusable component that can be used to create different types of user input and fields, such as text input, password input, checkbox, etc.

Here is an example of a form input component in React:

function FormInput(props) {
  return (
    <div>
      <label>{props.label}</label>
      <input type={props.type} value={props.value} onChange={props.onChange} />
    </div>
  );
}

In the above component, the type, value, and onChange props are used to customize the input field. This component can be used to create different types of input fields by passing different values for these props.

Best Practices for Code Reusability in React

Using Props and State to Make Components More Flexible

Props and state are two essential concepts in React that allow developers to create flexible and reusable components. By using props and state, components can be customized and adapted to different use cases, making them more versatile and efficient. Here are some best practices for using props and state in React components:

Using Props to Customize Components

Props are used to pass data from a parent component to a child component. By using props, components can be customized and made more flexible. For example, a button component can have a label prop that allows it to display different text on the button.

Here is an example of a button component that uses props to customize the label:

function Button(props) {
  return <button>{props.label}</button>;
}

In the above component, the label prop is used to customize the button's text. This makes the button component more versatile and reusable.

Using State to Manage Component Data

State is used to manage data within a component. By using state, components can be made more dynamic and responsive. For example, a countdown timer component can use state to update the UI with the current countdown time.

Here is an example of a countdown timer component that uses state to manage the data:

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: props.seconds };
  }

  tick() {
    this.setState((state) => ({
      seconds: state.seconds - 1,
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <div>Seconds remaining: {this.state.seconds}</div>;
  }
}

In the above component, the state is used to manage the seconds data, which is then used to update the UI with the current countdown time. This makes the component more flexible and reusable, as it can be customized with different countdown times.

Using Props and State Together

Props and state can be used together to make components even more flexible and versatile. By using props to pass data to a component and state to manage that data, components can be made to adapt to different use cases and become more dynamic.

Here is an example of a form input component that uses props and state together:

class FormInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: props.value };
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <div>
        <label>{this.props.label}</label>
        <input
          type={this.props.type}
          value={this.state.value}
          onChange={this.handleChange.bind(this)}
        />
      </div>
    );
  }
}

In the above component, the value state is used to manage the value of the input field, while the label and type props are used to customize the input field. This makes the form input component more flexible and versatile, as it can be customized with different labels and input types.

Creating Higher-Order Components (HOCs) for Cross-Cutting Concerns

Higher-order components (HOCs) are functions that take a component and return a new component with additional functionality. HOCs can be used to encapsulate cross-cutting concerns, such as authentication, logging, and error handling, and make them reusable across different components in an application. Here are some best practices for creating HOCs in React:

Separating Cross-Cutting Concerns into HOCs

Cross-cutting concerns are functionality that is used across multiple components in an application. Examples of cross-cutting concerns include authentication, logging, and error handling. By separating cross-cutting concerns into HOCs, the functionality can be encapsulated in a single place and made more reusable.

Here is an example of a HOC that provides authentication functionality:

function withAuth(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = { isAuthenticated: false };
    }

    componentDidMount() {
      // Perform authentication check here
      const isAuthenticated = true; // replace with actual authentication check
      this.setState({ isAuthenticated });
    }

    render() {
      return this.state.isAuthenticated ? <WrappedComponent {...this.props} /> : null;
    }
  };
}

In the above example, the withAuth HOC performs an authentication check and only renders the wrapped component if the user is authenticated. This HOC can be used to provide authentication functionality to multiple components in the application.

Using HOCs to Encapsulate Functionality

HOCs can be used to encapsulate functionality that is used across multiple components in an application. By encapsulating functionality in HOCs, the code can be simplified, made more modular, and easier to maintain.

Here is an example of an HOC that provides error-handling functionality:

function withErrorHandling(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = { error: null };
    }

    componentDidCatch(error, errorInfo) {
      // Handle the error here
      this.setState({ error });
    }

    render() {
      return this.state.error ? <div>Error: {this.state.error.message}</div> : <WrappedComponent {...this.props} />;
    }
  };
}

In the above example, the withErrorHandling HOC provides error handling functionality that can be used to catch and handle errors in multiple components in the application. This makes the code more modular and easier to maintain.

Using HOCs to Wrap Components

HOCs can be used to wrap components and add additional functionality. By using HOCs to wrap components, the functionality can be added to multiple components without changing the component code.

Here is an example of a HOC that provides a loading spinner while a component is loading:

function withLoading(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = { isLoading: true };
    }

    componentDidMount() {
      // Perform loading check here
      setTimeout(() => {
        this.setState({ isLoading: false });
      }, 1000);
    }

    render() {
      return this.state.isLoading ? <div>Loading...</div> : <WrappedComponent {...this.props} />;
    }
  };
}

In the above example, the withLoading HOC provides a loading spinner that can be used to indicate that a component is still loading. This HOC can be used to wrap multiple components in the application, making them more user-friendly and improving the user experience.

Composing HOCs for More Complex Functionality

HOCs can be composed to create more complex functionality. By combining multiple HOCs, developers can create new functionality that can be used across different components in the application.

Here is an example of a HOC that composes the withAuth and withLoading HOCs:

function withAuthenticatedLoading(WrappedComponent) {
  const AuthenticatedLoading = withAuth(withLoading(WrappedComponent));
  return AuthenticatedLoading;
}

In the above example, the withAuthenticatedLoading HOC composes the withAuth and withLoading HOCs to provide authentication and loading functionality to a component. This HOC can be used to create components that require both authentication and loading functionality.

Use Render Props for Component Composition

Render props are a powerful technique in React that allow components to share code and functionality with other components. By using render props, components can be composed and customized in a flexible and efficient way. Here are some best practices for using render props in your React app:

Using Render Props to Share Code

Render props are a technique that allows a component to share code with another component by passing a function as a prop. The receiving component can then call the function to access the shared code.

Here is an example of a component that uses a render prop to share code:

class Mouse extends React.Component {
  constructor(props) {
    super(props);

    this.state = { x: 0, y: 0 };
  }

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY,
    });
  };

  render() {
    return <div onMouseMove={this.handleMouseMove}>{this.props.render(this.state)}</div>;
  }
}

In the above example, the Mouse component uses a render prop to share the x and y coordinates of the mouse with a child component. The child component can access the x and y coordinates by calling the function passed as the render prop.

Using Render Props to Compose Components

Render props can be used to compose components in a flexible and efficient way. By using render props, components can be customized and composed in a way that is not possible with other techniques.

Here is an example of a component that uses a render prop to compose another component:

class Toggle extends React.Component {
  constructor(props) {
    super(props);

    this.state = { on: false };
  }

  toggle = () => {
    this.setState({ on: !this.state.on });
  };

  render() {
    const { children } = this.props;

    return children({ on: this.state.on, toggle: this.toggle });
  }
}

In the above example, the Toggle component uses a render prop to compose another component. The child component can access the on state and toggle function by calling the function passed as the children prop.

Using Render Props for Customization

Render props can be used for customization by allowing components to be composed in a way that is flexible and efficient. By using render props, components can be customized with different functionality and options.

Here is an example of a component that uses a render prop for customization:

class Button extends React.Component {
  render() {
    const { children, onClick } = this.props;

    return <button onClick={onClick}>{children}</button>;
  }
}

class App extends React.Component {
  render() {
    return (
      <Button onClick={() => console.log("Button clicked!")}>
        {({ onClick }) => <span onClick={onClick}>Click me!</span>}
      </Button>
    );
  }
}

In the above example, the Button component uses a render prop to allow for customization. The App component customizes the Button component with a different click event handler and child element.

Here's another example of a Toggle component that uses the render props:

import React from "react";

class Toggle extends React.Component {
  constructor(props) {
    super(props);

    this.state = { on: false };
  }

  toggle = () => {
    this.setState({ on: !this.state.on });
  };

  render() {
    const { render } = this.props;

    return <div onClick={this.toggle}>{render(this.state)}</div>;
  }
}

function App() {
  return (
    <Toggle
      render={({ on }) => (
        <div>{on ? "The toggle is on" : "The toggle is off"}</div>
      )}
    />
  );
}

export default App;

In this example, the Toggle component takes a render prop that is a function. The render prop function takes an object with the on state as a parameter and returns the JSX to be rendered. The Toggle component toggles the on state when it is clicked and passes the updated state to the render prop function. The App component renders the Toggle component and passes the render prop function to it.

When the Toggle component is clicked, it toggles the on state and passes the updated state to the render prop function. The render prop function then returns the appropriate JSX based on the on state. In this example, the render prop function returns either "The toggle is on" or "The toggle is off".

Image by vectorjuice on Freepik

Conclusion

Code reusability is a key aspect of efficient and scalable React development. By creating reusable components, developers can save time and effort in their development process, while also improving the maintainability and modularity of their code. Reusable components can be shared across multiple projects, and can even be compiled into a library of components for use in a variety of different applications.

Functional and class components, higher-order components, and render props are all techniques that can be used to create reusable components in React. When creating reusable components, it is important to use consistent naming conventions, props, and state to make components more flexible and to ensure compatibility with different versions of React. Managing dependencies and dealing with conflicts and naming collisions are also important aspects of creating reusable components.

There are many benefits to code reusability, including improved productivity, increased consistency, and more efficient development. However, there are also some challenges, such as maintaining backwards compatibility and dealing with conflicts and dependencies. Despite these challenges, the benefits of code reusability far outweigh the costs, and developers should strive to incorporate code reusability in their React development process.

Comments

[Rense Bakker]

Function components can hold state though. There's a bunch of hooks to manage state inside function components since React 16.8.

The composition pattern is what you want to get really familiar with to write good reusable components.

HoC pattern creates a hard link between the parent and the child. Sometimes this cannot be avoided, but it creates a problem when the implementation of the parent changes, forcing you to update the children as well (violating the open/closed principle). Its also better to use React context with custom hooks instead of HoC since React 16.8. Custom hooks make it more clear which functionality you're using inside a child and reduce the risk of having to change the child when the parent changes.

Render props I would also not recommend. It's bad for performance (you're forcing react to always execute the function inside the children prop) and It can easily be replaced with react context and custom hooks as well.