Liskov substitution principle

This principle states that subclasses should be able to replace their superclasses without breaking the expected behavior. Bringing this into the React world, we mean that…

Every alternative component must functionally work the same as the original.

All button variants (like PrimaryButton, SecondaryButton, OutlineButton, etc.) must respect the properties (the contract) of a base button.

In other words, they MUST have the same props as the parent component. So, in React, Liskov tells us: “if you create variations of a base component, all of them must preserve the functional behavior expected by the consumer.”

For example, a component that respects its contract would look like this:

type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;

export const PrimaryButton = (props: Props) => (
  <button className="bg-blue-500 text-white px-4 py-2 rounded" {...props} />
);

export const OutlineButton = (props: Props) => (
  <button className="border border-gray-500 text-gray-700 px-4 py-2 rounded" {...props} />
);

In this case, both components respect the Props contract assigned to them.

Let me know if you’d like this turned into documentation or slides!