You are Writing Reactjs Wrongly!!

Before you come at me, do you believe in programming paradigms like DRY — Don’t Repeat Yourself? If so, why do you code in React like this?

// Header.jsx
import React from "react";

const Header = () => {
  const handleClick = () => {
    // code to handle click functionality
  };

  return (
    <nav>
      <a href="/contact-me">Contact Me</a>
      <a href="/projects">Projects</a>
      <a href="/about">About Me</a>
      <a href="/others">Others</a>
    </nav>
  );
};

export default Header;

Why not like this?

//Header.jsx
import React from "react";

const socials = [
  {
    name: "Contact Me",
    url: "/contact-me",
  },
  {
    name: "Projects",
    url: "/projects",
  },
  {
    name: "About Me",
    url: "/about",
  },
  {
    name: "Others",
    url: "/others",
  }
];

const Header = () => {
  const handleClick = () => {
   // code to handle click functionality
  };

  return (
         <nav>
            {
              socials.map((social, index) => {
                return <a key={index} href={social.url}>{social.name}</a>
              })
            }
          </nav>
  );
};
export default Header;

However, in a simple use case like this example, either method has an insignificant performance difference.

In more complex scenarios where there is a much larger number of elements to be rendered. The second method is more performant and scalable.

Many developers overlook one of React’s core features: Component Reusability. Component Reusability means components created once can be rendered severally on the same or multiple pages. One method to achieve this is Component Composition.

In this article, let us consider two main concepts in building Reusable Components by Component Composition:

Component Specialization

This concept involves creating special types of an existing component through props. For example, a Button component can be specialized to create PrimaryButton, SecondaryButton, IconButton, etc., each with its unique styles or behaviors.

// Button.jsx
const Button = ({ children, color, handleClick }) => {
  return (
    <button style={{ backgroundColor: `${color}` }} onClick={handleClick}>
      {children}
    </button>
  );
};

// The specialized buttons are special instances of the Button Component
const SubmitButton = () => {
  const handleClick = () => {
    // Handle submit button click
  };

  return <Button color="blue" handleClick={handleClick}>Submit</Button>;
};
const ErrorButton = () => {
  const handleClick = () => {
    // Handle error button click
  };

  return <Button color="red" handleClick={handleClick}>Try Again</Button>;
};

Component Containment

This concept emphasizes that component do not know their children ahead of time. Instead, components should be designed to accept and render children dynamically, allowing for greater flexibility and reusability.

// Modal.jsx
const Modal = ({ children, type }) => {
  return (
    <div className={`modal modal-${type}`}>
      {children}
    </div>
  );
};

Benefits Of Component Composition

Scalability

Component composition allows for scalable and maintainable code in cases with multiple elements to manage. As the application grows, new elements can be added without rewriting existing components.

Reusability

Components designed with reusability in mind can be used multiple times across different parts of an application, reducing code duplication and enhancing maintainability.

Better Organization

Component composition encourages better organization of code. By breaking down the UI into smaller, reusable components, the overall structure of the application becomes clearer and more modular.

Conclusion

In essence, you are miswriting React if you are not building reusable components. Embracing concepts like Component Specialization and Component Containment not only adheres to the DRY principle but also enhances your code's scalability, reusability, and organization. Start writing React the right way today!