score:25

Accepted answer

for all practical reasons, decorators and hoc (higher-order-component aka wrapper) do the same thing.

one major difference is that, once you add a decorator, the property/class can only be used in it's decorated form. hoc pattern leaves higher order as well as the lower order components available for use.

for further reading on decorators -> https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841
decorators isn't a widely implemented js feature. it is still in its proposal stage. babel 7 by default allows decorators as a default plugin in their stage 0 configuration. https://babeljs.io/docs/plugins/transform-decorators/

score:6

two differences would be decorators are used to mutate the variable while hoc's are recommended not to. another is specific to react, hoc's are supposed to render a component, while decorators can return different things depending on implementation.

score:9

i also am curious why the react community calls this higher-order component (hoc) instead of decorator pattern, which seems to be what it exactly is doing and has been described in 1994 (!) by the gang of four (gof): erich gamma, richard helm, ralph johnson, and john vlissides.

an additional source of confusion is that es7's decorator pattern is different than gof's explanation of decorator pattern. it is unfortunate that that is the case. i'd have hoped that instead of redefining an existing term, it'd be preferable to reuse the term even while qualifying it. and even if that's not possible, inventing a different term would be more acceptable.


Related Query

More Query from same tag