Monday, December 5, 2022
HomeSoftware EngineeringHow To Reuse React Elements | by Sabesan Sathananthan | Codezillas

How To Reuse React Elements | by Sabesan Sathananthan | Codezillas

Mixins, HOC, render props, and Hooks are 4 methods to reuse parts

Photograph by Vlada Karpovich from Pexels
  • There’s an implicit dependency between the part and the mixin (Mixin typically is dependent upon the precise technique of the part, however the dependency will not be recognized when the part is outlined).
  • There could also be conflicts between a number of mixin (comparable to defining the identical state discipline).
  • Mixin tends so as to add extra states, which reduces the predictability of the appliance and results in a pointy improve in complexity.
  • Implicit dependencies result in opaque dependencies, and upkeep prices and understanding prices are rising quickly.
  • It’s troublesome to shortly perceive the habits of parts, and it’s vital to completely perceive all of the extension behaviors that depend on mixin and their mutual affect.
  • The strategy and state discipline of the part itself is afraid to be simply deleted as a result of it’s troublesome to find out whether or not mixin is dependent upon it.
  • Mixin can also be troublesome to keep up, as a result of Mixin logic will ultimately be flattened and merged collectively, and it’s troublesome to determine the enter and output of a Mixin.


  • Scalability restriction: HOC can not fully substitute Mixin. In some eventualities, Mixin can however HOC can not. For instance, PureRenderMixin, as a result of HOC can not entry the State of subcomponents from the skin, and on the identical time filter out pointless updates by means of shouldComponentUpdate. Subsequently, React After supporting ES6Class, React.PureComponent is offered to unravel this drawback.
  • Ref switch drawback: Ref is minimize off. The switch drawback of Ref is kind of annoying beneath the layers of packaging. The perform Ref can alleviate a part of it (permitting HOC to find out about node creation and destruction), so the React.forwardRef API API was launched later.
  • WrapperHell: HOC is flooded, and WrapperHell seems (there isn’t a drawback that can not be solved by one layer, if there’s, then two layers). Multi-layer abstraction additionally will increase complexity and price of understanding. That is essentially the most vital defect. In HOC mode There isn’t a good answer.


  • Property agent Props Proxy.
  • Reverse inheritance Inheritance Inversion.

Property Agent

Reverse inheritance


const NavbarWithRouter = withRouter(Navbar);
const CommentWithRelay = Relay.createContainer(Remark, config);


Please enter your comment!
Please enter your name here

Most Popular

Recent Comments