Dependency Injection in React

In software engineering, dependency injection is a design pattern in which an object or function receives other objects or functions that it depends on. ¹

Pros

• More flexible
• Easier for unit testing.

Cons

• More complexity

Example

This is Page component which has the ExoticButton as a dependency.

export default function Page({ ... }: Props) {
  return (
    <div>
      <ExoticButton/>
    </div>
  );
}

In this case, if we change the button, it will inevitably affect the Page component. Or if a consumer of the component doesn't want to use the ExoticButton, we can have a conditional flag to change the button.

export default function Page({ ..., isAnotherPage }: Props) {
  return (
    <div>
      {isAnotherPage ? <ExoticButton/>: <AnotherButton/>}
    </div>
  );
}

A dependency injection way is to lift the button rendering responsibily to the consumer of the Page component.

export default function Page({ ..., button }: Props) {
  return (
    <div>
      {button}
    </div>
  );
}