Case Study: The Dark Side of Inheritance

How can I begin to change the behavior of an EmailInput without understanding what a FormNode actually does?The SolutionNot a single class in our new project extends more than one level past the base React componentThe obstacles presented by this structure were bedeviling both to relatively new engineers like myself and to the most senior engineer on our team..Ultimately we decided to rebuild our signup funnel entirely..That decision had its own pros and cons that are the subject for another blog post..One thing we were certain not to do, however, was use deep inheritance chains..Not a single class in our new project extends more than one level past the base React component..In fact, much of the code eschews ES6 classes entirely – right now we rely on extending the base React component for lifecycle methods, but even that could be removed with the introduction of hooks.Take SubscriptionEmailAndAddressStep above: It inherits from 3 custom classes and React.Component..Its equivalent in the new project is AddressStep, which only extends that same base React component, a well-documented part of the React framework..There’s no superclasses in our code to dig through..Mind you, this simplification wouldn’t be worth much if it added lots of duplication..After all, the other funnel steps (plan selection, billing, etc) have a lot of the same behavior: they all have forms with inputs and forward and back buttons..We wouldn’t want to repeat ourselves excessively..The answer is to favor composition over inheritance.. More details

Leave a Reply