Mastering React Component Structure: Coupling, Cohesion, and Prop Strategies

Coupling & Cohesion

Coupling describes how tightly components depend on each other; loose coupling allows a component to change without affecting others. Cohesion measures whether a component does one thing well, following the single‑responsibility principle. High cohesion and loose coupling make components easier to manage and extend.

Building Components

When constructing a reusable component for an expense‑management UI, the way data is passed (props) determines flexibility, reusability, and maintenance effort. Below are common strategies and their trade‑offs.

No Props

const ExpenseDetails = () => (
  <div className='expense-details'>
    <div>Category: <span>Food</span></div>
    <div>Description: <span>Lunch</span></div>
    <div>Amount: <span>10.15</span></div>
    <div>Date: <span>2017-10-12</span></div>
  </div>
);

This static version is simple but offers no flexibility; any change requires editing the component itself.

Pass an expense Object

const ExpenseDetails = ({ expense }) => (
  <div className='expense-details'>
    <div>Category: <span>{expense.category}</span></div>
    <div>Description: <span>{expense.description}</span></div>
    <div>Amount: <span>{expense.amount}</span></div>
    <div>Date: <span>{expense.doneAt}</span></div>
  </div>
);

The component now depends on the shape of the expense object. Changing the object’s structure requires updating the component, but the UI format is centralized.

Pass Only Necessary Props

const ExpenseDetails = ({ category, description, amount, date }) => (
  <div className='expense-details'>
    <div>Category: <span>{category}</span></div>
    <div>Description: <span>{description}</span></div>
    <div>Amount: <span>{amount}</span></div>
    <div>Date: <span>{date}</span></div>
  </div>
);

By exposing only the fields the component needs, you reduce coupling to the data source, though every usage site must supply each prop.

Pass a Map or Array

const ExpenseDetails = ({ expense }) => (
  <div className='expense-details'>
    {Object.entries(expense).map(([key, value]) => (
      <div key={key}>{key}: <span>{value}</span></div>
    ))}
  </div>
);

This approach decouples the component from a fixed schema, but you lose control over ordering and styling.

Pass a Formatted Child Object

const ExpenseDetails = ({ children }) => (
  <div className='expense-details'>
    {children}
  </div>
);

The component acts purely as a container; the caller provides the full markup, offering maximum flexibility at the cost of internal cohesion.

Logo Example (Static Props)

const Logo = () => (
  <div className='logo'>
    <img src='/logo.png' alt='DayOne logo' />
  </div>
);

Static assets like a logo are good candidates for components without props because their content rarely changes.

Environment Matters

The optimal prop‑passing strategy depends on the project’s size, stage, component complexity, developer habits, and how often the UI will evolve. No single solution fits all scenarios; choosing the right approach has long‑term impact on maintainability and scalability.