DEV Community


Posted on • Updated on

Need Opinions

Need opinions:
what is better in JS context composition or inheritance? What should be used when?

Top comments (5)

sharlaan profile image
Raphaël Morineau • Edited

Composition, always.

Inheritance makes components strongly coupled to their mother "class", effectively making them unusable in a different context (reusability).

With React, you implement common logic into HigherOrderComponents (HoC) which are essentially functions taking any component as parameter, to return it with extended props including the common logic.
More recently, React introduced Hooks which simplifies even more this composition pattern.

With Vue, you can do the same with "mixins", which can be imported into any component, effectively extending their core logic.

Also, writing common logic into small functions makes them highly composable, chainable and reusable with currying, which is more inline with functional programming.

Lastly, a composable HoC/mixin are much easier to unit test, than a "mother class" used in POO.

akanksha_9560 profile image

Very good points :), but what would be the circumstances we would use inheritance?

sharlaan profile image
Raphaël Morineau

Honestly i never felt the use for it, either in front nor in a Node backend.

A usecase where inheritance could be useful would be, in a big NodeJS-based backend, to create a custom module from another module so you could extend it with your custom methods.
Best example coming to my mind is NestJS, check it out.

pentacular profile image

What is better -- fish or a hat?