DEV Community

Nwanguma Victor
Nwanguma Victor

Posted on

Scalable Reusable Components in React

I will briefly go over this tutorial, with an example ErrorAlert component.

The Problem

When creating reusable components people will naturally feel passing what the component needs as props would be right, but over time that component would become this:

Enter fullscreen mode Exit fullscreen mode

You don't need me to tell you the disadvantages of this approach in the long run.

The Solution

import { IonIcon } from "@ionic/react";
import { alertCircleOutline } from "ionicons/icons";
import React from "react";

interface IEssentials {
  className?: string;

const Body: React.FC<IEssentials> = ({ children, className, }) => {
  return (
    <div className={"p-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" + " " + className} {} role="alert">

const Text: React.FC<IEssentials> = ({ children, className, }) => {
  return (
    <div className={"flex items-center gap-1" + " " + className} {}>
      <IonIcon icon={alertCircleOutline} />

export const ErrorAlert = { Body, Text };
Enter fullscreen mode Exit fullscreen mode


import { ErrorAlert } from "./ErrorAlert.tsx"

const data = [...];

const App: React.FC = () => {
    return (
               { => (
Enter fullscreen mode Exit fullscreen mode

Advantages of this approach

  • Open/Closed principle (SOLID): It should be open to extend but closed for modification.
  • Single Responsibility Principle (SOLID): Individual child components should have a single responsibility or perform a single function, this approach makes it easier to extend without having to modify the whole component.
  • Decoupling enables adding explicit functionalities based on requirements.
  • Easy refactoring.

Top comments (0)