---
title: How to be Better in React Code Reusability - Part 1
description: 'React code reuse (Part 1): custom hooks, Server Components, composition over inheritance — the patterns that replaced HOCs and render props in modern React.'
url: https://nerdleveltech.com/react-reusability-part1
language: en
date: '2023-03-16'
category: frontend
markdown_url: https://nerdleveltech.com/react-reusability-part1.md
attribution: 'Source: NerdLevelTech — https://nerdleveltech.com/react-reusability-part1'
terms: https://nerdleveltech.com/llms.txt
---

# How to be Better in React Code Reusability - Part 1

## A Brief Overview of React and Its Popularity

**React** is one of the most popular **front-end JavaScript libraries** for building user interfaces. Developed by Meta (formerly Facebook), React has gained a massive following in the **web development community** due to its simplicity, flexibility, and scalability.

React's popularity stems from its **component-based architecture**, which allows developers to break down complex user interfaces into small, **reusable React components**. These smaller components can then be composed to create larger, more complex UIs—a core **React design pattern** that powers modern web applications.

However, as **React applications** grow, managing the codebase becomes challenging. This is where **code reusability in React** comes in—writing **reusable components** that can be shared across different parts of an application (and even across multiple projects). It saves time, reduces errors, and improves **scalability and maintainability**.

In this **React tutorial**, we'll explore **how to create reusable React components**, the importance of **DRY (Don't Repeat Yourself)** principles, and **React best practices** for component design.

---

## React Components and Their Importance in Reusability

Components are the building blocks of React. When designed for reusability, they can be imported and integrated across different parts of an app, speeding up development and reducing duplication.

### Comparison: Functional vs. Class Components

#### Functional Components
- Simpler, concise, easier to test and maintain.
- Take `props` as input and return JSX.
- Commonly used with **hooks** for state and lifecycle logic.
- Ideal for **stateless UI pieces** or logic that can be wrapped in custom hooks.

Example:

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

This `Welcome` component can be reused anywhere in the app with different `name` props.

---

#### Class Components
- More powerful, with **state** and **lifecycle methods**.
- Verbose and harder to maintain but useful in certain scenarios.

Example:

```jsx
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>;
  }
}
```

The timer is reusable by simply passing different `seconds` props.

---

## Examples of Reusable Components in React

### 1. Button Component
```jsx
function Button(props) {
  return <button onClick={props.onClick}>{props.label}</button>;
}
```

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

### 3. Form Input Component
```jsx
function FormInput(props) {
  return (
    <div>
      <label>{props.label}</label>
      <input type={props.type} value={props.value} onChange={props.onChange} />
    </div>
  );
}
```

---

## React Best Practices for Code Reusability

Following these **React component patterns** ensures your code stays maintainable and scalable.

### 1. Master Props and State
- Use **React props** for component customization and configuration
- Use **React state** (with `useState` hook) for managing dynamic behavior
- Combine both for flexible, **reusable UI components**

---

### 2. Higher-Order Components (HOCs)

HOCs wrap components with additional functionality.  
Example – Authentication:

```jsx
function withAuth(WrappedComponent) {
  return class extends React.Component {
    state = { isAuthenticated: false };

    componentDidMount() {
      const isAuthenticated = true; // Replace with real check
      this.setState({ isAuthenticated });
    }

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

---

### 3. Render Props

Render props let you share logic between components by passing a function.

Example:

```jsx
class Mouse extends React.Component {
  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>;
  }
}
```

Usage:

```jsx
<Mouse render={({ x, y }) => <p>Mouse position: {x}, {y}</p>} />
```

---

## Conclusion

**Code reusability** is a key factor in **scalable React development**. By leveraging:
- **Functional components** with React Hooks
- **Higher-order components (HOCs)** for cross-cutting concerns
- **Render props** for flexible component composition

…developers can build flexible, maintainable, and modular **React applications**.

**Reusable React components** improve productivity, ensure **UI consistency**, and enhance long-term maintainability. Whether you're building a **React single-page application (SPA)**, a **Next.js project**, or a **React Native mobile app**, these patterns form the foundation of professional **React development**.

In Part 2, we'll explore **custom hooks** and modern patterns like **compound components** and the **children prop pattern**.

[^react-docs]: React Documentation. Passing Props to a Component — composition via the `children` prop. https://react.dev/learn/passing-props-to-a-component