DEV Community

Aks
Aks

Posted on • Edited on

Need Opinions

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

Top comments (4)

Collapse
 
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.

Collapse
 
akanksha_9560 profile image
Aks

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

Collapse
 
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.

Collapse
 
pentacular profile image
pentacular

What is better -- fish or a hat?