React js - What is the difference betwen HOC and decorator

reactjs python-decorators higher-order-components
itay312 picture itay312 · Feb 8, 2018 · Viewed 7.3k times · Source

Can someone explain what is the difference between these two? I mean except the syntactic difference, do both of these techniques are used to achieve the same thing (which is to reuse component logic)?

Answer

Jeff P Chacko picture Jeff P Chacko · Feb 8, 2018

For all practical reasons, decorators and HOC's 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/

Related questions

Can you force a React component to rerender without calling setState?

I have an external (to the component), observable object that I want to listen for changes on. When the object is updated it emits change events, and then I want to rerender the component when any change is detected. With …

Read More
Loop inside React JSX

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> I realize and understand why this isn't …

Read More
"SyntaxError: Unexpected token < in JSON at position 0"

In a React app component which handles Facebook-like content feeds, I am running into an error: Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0 I ran into a similar error which turned out to be a …

Read More