-0.7 C
New York
Monday, March 20, 2023

How To Reuse React Elements | by Sabesan Sathananthan | Codezillas

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

Photograph by Vlada Karpovich from Pexels
  • There’s an implicit dependency between the element and the mixin (Mixin typically is dependent upon the precise methodology of the element, however the dependency is just not recognized when the element is outlined).
  • There could also be conflicts between a number of mixin (equivalent 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 enhance in complexity.
  • Implicit dependencies result in opaque dependencies, and upkeep prices and understanding prices are rising quickly.
  • It’s tough to rapidly perceive the conduct of elements, and it’s obligatory to completely perceive all of the extension behaviors that depend on mixin and their mutual affect.
  • The tactic and state discipline of the element itself is afraid to be simply deleted as a result of it’s tough to find out whether or not mixin is dependent upon it.
  • Mixin can be tough to take care of, as a result of Mixin logic will finally be flattened and merged collectively, and it’s tough to determine the enter and output of a Mixin.


  • Scalability restriction: HOC can’t utterly substitute Mixin. In some situations, Mixin can however HOC can’t. For instance, PureRenderMixin, as a result of HOC can’t entry the State of subcomponents from the surface, and on the similar time filter out pointless updates by means of shouldComponentUpdate. Subsequently, React After supporting ES6Class, React.PureComponent is offered to resolve this drawback.
  • Ref switch drawback: Ref is lower off. The switch drawback of Ref is sort of annoying below the layers of packaging. The operate 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 may be, then two layers). Multi-layer abstraction additionally will increase complexity and value 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);

Related Articles


Please enter your comment!
Please enter your name here

Latest Articles