Thursday, February 23, 2023
HomeSoftware EngineeringHow To Reuse React Parts | by Sabesan Sathananthan | Codezillas

How To Reuse React Parts | by Sabesan Sathananthan | Codezillas

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

Photograph by Vlada Karpovich from Pexels
  • There may be an implicit dependency between the part and the mixin (Mixin usually is determined by the particular technique of the part, however the dependency will not be identified when the part is outlined).
  • There could also be conflicts between a number of mixin (reminiscent of defining the identical state discipline).
  • Mixin tends so as to add extra states, which reduces the predictability of the applying and results in a pointy enhance in complexity.
  • Implicit dependencies result in opaque dependencies, and upkeep prices and understanding prices are rising quickly.
  • It’s tough to shortly perceive the conduct of elements, and it’s needed 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 tough to find out whether or not mixin is determined by it.
  • Mixin can also be tough to take care of, as a result of Mixin logic will ultimately be flattened and merged collectively, and it’s tough to determine the enter and output of a Mixin.


  • Scalability restriction: HOC can’t utterly change Mixin. In some eventualities, Mixin can however HOC can’t. For instance, PureRenderMixin, as a result of HOC can’t entry the State of subcomponents from the skin, and on the identical time filter out pointless updates by means of shouldComponentUpdate. Due to this fact, React After supporting ES6Class, React.PureComponent is offered to unravel this downside.
  • Ref switch downside: Ref is minimize off. The switch downside of Ref is kind of annoying underneath the layers of packaging. The perform Ref can alleviate a part of it (permitting HOC to study node creation and destruction), so the React.forwardRef API API was launched later.
  • WrapperHell: HOC is flooded, and WrapperHell seems (there isn’t any downside that can’t be solved by one layer, if there may be, then two layers). Multi-layer abstraction additionally will increase complexity and value of understanding. That is probably the most vital defect. In HOC mode There is no such thing as a good resolution.


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

Property Agent

Reverse inheritance

be aware

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

Most Popular