When can I extend custom component in LWC?

Question

As a general implementation guidelines of LWC, we should be extending standard LWC elements. Examples are:

1. export default class MyComponent extends LightningElement (Most used)

2. export default class MyComponent extends NavigationMixin(LightningElement)

3. export default class MyComponent extends LightningDatatable (for using custom components in datatable.) Refer HERE

Now, the question is when exactly should I extend other custom components? Something like

export default class MyComponent extends MyOtherComponent

And what are the considerations I should have while extending other custom components?

Answer 1

Not exactly an answer, but something I found a few months back on React. React is also a web framework like LWC.

At Facebook, we use React in thousands of components, and we haven’t found any use cases where we would recommend creating component inheritance hierarchies.

Props and composition give you all the flexibility you need to customize a component’s look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.

If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it.

Src: Composition Vs Inheritance in React

TBH I too never faced a scenario where I had to extend my Custom Component, In case of JS reusability, It can be done importing service libraries, and markup extension? are just parent markup containing child markup.

I know about a consideration that pchittum answered few months back, that you cannot pass parent property while creating child component via App Builder.