React extends for function component?

Question

I have a class component that extends another class component:

export default class MyLittleComponent extends TheBigBoy

Now I need to refactor MyLittleComponent to functional component so it works with hooks etc. But then I lose everything inherited from TheBigBoy.

Is there a way to write function component AND to keep the dependency/extension of TheBigBoy?

TheBigBoy is used all over the app so I can't remove it just yet.

I can possibly make a function copy of TheBigBoy and then somehow attach it to MyLittleComponent but what would be the best way as there's no "extends" for function components as far as I know? A hook of some sort? I want to avoid HOC as that's one of the things I'm running away from.

Kabece · Accepted Answer · 2023-06-26 04:04:25Z

2

In general, React team recommends composition over inheritance.

What you can do though, is to use a two-pronged approach:

Move the logic and state management from TheBigBoy to a custom hook. Then your MyLittleComponent can use that hook.
Turn TheBigBoy into a component that takes children. You can then pass your MyLittleComponent into TheBigBoy

Hope that helps.

answered Jun 26, 2023 at 4:04

Kabece

764 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kiran Shahi Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

React extends for function component?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related