Skip to main content

Component Reusability: DRY Principle Guide

The DRY principle—"Don't Repeat Yourself"—is fundamental to React development. By creating reusable components instead of duplicating UI code, you ensure a single source of truth for styling and behavior. This guide teaches you how to identify repeated patterns, refactor them into flexible components, and build maintainable applications that scale.

Key Takeaways​

  • DRY eliminates code duplication by replacing repeated patterns with reusable component abstractions
  • Reusable components provide a single source of truth, ensuring consistency across your UI
  • Use props to make components dynamic, handling variations without creating multiple versions
  • Generic components are easier to test, maintain, and extend as your application grows

What Is the DRY Principle and Why Apply It in React?​

DRY stands for Don't Repeat Yourself. It's a core software development principle aimed at reducing repetition by replacing duplicate code patterns with abstractions. In React, you apply DRY primarily through reusable components—creating a single component once and using it wherever needed instead of writing the same UI code multiple times.

In React applications, this approach directly impacts three areas: maintainability (changes happen in one place), consistency (all instances behave identically), and efficiency (write once, use many times).

Key Principles:

  • Single Source of Truth: A reusable component becomes the definitive implementation of a UI piece. Change the button styling once, and it updates everywhere automatically.
  • Consistency: Reusable components guarantee that all instances of a button, card, or input look and behave identically across your application.
  • Efficiency: Writing a component once and reusing it dozens of times saves development time and reduces bugs introduced through manual repetition.

How Do You Refactor Repetitive Code Into Reusable Components?​

The "Wet" Code: Write Everything Twice​

Imagine an application with three similar buttons, each with identical styling but different colors and labels:

// App.jsx
import React from 'react';

const App = () => {
  return (
    <div>
      <button style={{ backgroundColor: 'blue', color: 'white', padding: '10px 20px' }}>
        Login
      </button>
      <button style={{ backgroundColor: 'green', color: 'white', padding: '10px 20px' }}>
        Sign Up
      </button>
      <button style={{ backgroundColor: 'red', color: 'white', padding: '10px 20px' }}>
        Delete
      </button>
    </div>
  );
};

export default App;

This code violates DRY: styling is duplicated in three places. If you need to change the padding, you must edit three separate lines—increasing the risk of errors and inconsistencies.

The "Dry" Code: Don't Repeat Yourself​

Refactor this into a reusable Button component that accepts props for customization:

// components/Button.jsx
import React from 'react';

const Button = ({ text, color, onClick }) => {
  const style = {
    backgroundColor: color,
    color: 'white',
    padding: '10px 20px',
  };

  return (
    <button style={style} onClick={onClick}>
      {text}
    </button>
  );
};

export default Button;

Now use it in App.jsx:

// App.jsx
import React from 'react';
import Button from './components/Button';

const App = () => {
  const handleLogin = () => alert('Logging in...');
  const handleSignUp = () => alert('Signing up...');
  const handleDelete = () => alert('Deleting...');

  return (
    <div>
      <Button text="Login" color="blue" onClick={handleLogin} />
      <Button text="Sign Up" color="green" onClick={handleSignUp} />
      <Button text="Delete" color="red" onClick={handleDelete} />
    </div>
  );
};

export default App;

Walkthrough:

  • The Button component centralizes styling logic once—changes here automatically apply everywhere.
  • Props (text, color, onClick) make the component dynamic, handling variations without duplication.
  • The App component is now cleaner and more readable; you see the intent (Login, Sign Up, Delete) rather than style repetition.

Building a Reusable Card Component: A Practical Example​

Let's build a more complex reusable component: a Card wrapper that provides consistent styling for any content you pass to it.

The Goal: Create a Card component that wraps content with a border and padding, making it reusable for different types of content.

// components/Card.jsx
import React from 'react';

const Card = ({ children, title }) => {
  const style = {
    border: '1px solid #ccc',
    padding: '16px',
    margin: '16px',
    borderRadius: '8px',
  };

  return (
    <div style={style}>
      {title && <h2>{title}</h2>}
      {children}
    </div>
  );
};

export default Card;

Now use it in App.jsx with different content:

// App.jsx
import React from 'react';
import Card from './components/Card';

const App = () => {
  return (
    <div>
      <Card title="Welcome">
        <p>This is a simple card component.</p>
      </Card>

      <Card title="User Profile">
        <p>Name: John Doe</p>
        <p>Email: [email protected]</p>
      </Card>
    </div>
  );
};

export default App;

Walkthrough:

  • The children prop holds any JSX nested between the opening and closing tags, making Card a generic wrapper.
  • The optional title prop customizes the card further without requiring separate components.
  • You now have one consistent card style reused for different purposes—whenever styling needs updating, one edit applies everywhere.

Best Practices for Creating Reusable Components​

Do:

  • Identify Repetition: Scan your codebase for repeated JSX or logic—it's a red flag that refactoring will help.
  • Keep Components Generic: Design reusable components to handle variations via props, not hardcoding values.
  • Start Small: Begin with simple, obvious candidates like buttons, cards, and inputs before abstracting complex logic.
  • Test Reusable Components: Test once, and you verify the behavior across all uses.

Avoid:

  • Over-Engineering: Don't create a reusable component for something used only once; the abstraction overhead isn't worth it.
  • Too Many Props: If a component requires 10+ props, it's likely trying to do too much. Break it into smaller, focused components instead.
  • Tight Coupling: Avoid baking business logic into reusable components; pass logic via callbacks or state management.

Frequently Asked Questions​

How many props should a reusable component have?​

Most well-designed reusable components have 3–5 props. If you exceed 7–8 props, consider splitting the component into smaller, single-purpose components. Excessive props indicate the component is handling too many concerns.

What is the difference between a reusable component and a utility component?​

A reusable component (like Button or Card) is used multiple times throughout an application with varying data or configuration. A utility component is often a wrapper for external libraries or frameworks. Reusable components are core to your UI system; utility components solve specific technical problems.

When should I use composition over prop drilling?​

Use composition (passing JSX via children or props) when you want flexibility and avoid "prop drilling"—passing props down multiple levels. The Card component's use of children is composition in action. Prop drilling occurs when you pass props through intermediate components that don't use them; refactor by moving child components closer to where they're used.

Should reusable components include state or just accept props?​

Prefer stateless (presentational) reusable components that accept props and call callbacks. State in reusable components reduces flexibility and makes testing harder. Keep state management in parent or container components; reusable components focus on rendering based on props.

How do I version reusable components as my design evolves?​

Document breaking changes in your component's props. If you need a new variant (e.g., Button vs. SmallButton), either add a size prop to the existing component or create a new component with a clear name. Use semantic versioning: patch for prop additions that are backward-compatible, minor for new optional props, major for breaking prop changes.

Conclusion​

The DRY principle is central to React's power. By thinking in reusable components and identifying repeated patterns, you build applications that are maintainable, scalable, and consistent. Start by refactoring obvious duplicates like buttons and cards, then apply the same thinking to more complex UI patterns.

Challenge Yourself: Create a reusable Input component that accepts type (text, password, email), placeholder, and value as props. Use it in a form with multiple input types and verify that one styling change propagates to all instances.

Glossary​

  • DRY (Don't Repeat Yourself): A software development principle aimed at reducing code repetition by replacing duplicate logic with reusable abstractions.
  • Reusability: The ability to use the same component in multiple places with different props, eliminating code duplication.
  • Abstraction: The process of hiding complex implementation details behind a simpler, more generic interface (in this case, a component with props).
  • Props: Read-only data passed from a parent component to customize a child component's behavior and appearance.

Further Reading​