score:25
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.
Source: stackoverflow.com
Related Query
- React js - What is the difference betwen HOC and decorator
- What is the difference between React Native and React?
- What is the difference between NextJs and Create React App
- What is the difference between hashHistory and browserHistory in react router?
- React Native - What is the difference between StyleSheet.absoluteFill() and StyleSheet.absoluteFillObject()?
- What is the main difference between React Query and Redux?
- React - What is the difference between renderToString and renderToStaticMarkup
- React Hooks: What is the difference between 'useMutationEffect' and 'useLayoutEffect'?
- What is the difference between React component instance property and state property?
- What is the difference between React component and React component instance?
- How does React router works and what is the difference between <link> and<Route>
- What is the difference between arrow functions and regular functions inside React functional components (no longer using class components)?
- ES6 React - What are the difference between reference, shallow copy and deep copy and how to compare them?
- What is the difference between useHistory() and props.history in React Route
- what is the difference between getDefaultProps and getInitialState react js
- React Transition Group: What is the difference between the appear, enter, exit events and the enter, active done className suffixes?
- What is the difference between accessible, accessibilityLabel and accessibilityHint properties of Text component in react native?
- What is the real difference between value and defaultValue in React JS?
- What is the difference between a javascript package, node package, and react package?
- What is the difference between React and Preact diff algorithm in depth
- What is the difference between a fibre object in React 16 and a React Element?
- What is the difference between HOC and lifting state up in ReactJS?
- What is the difference between Routing in React and Express
- What is the difference between passing a function name in onclick react and calling it through callback
- What is the difference between key and id in React component?
- what is the difference between React setState and Hooks setState?
- what is the difference between element attribute and component attribute in React <Route><Route/> tag
- What is the difference between function and functional React component?
- What is the difference between Nav.Link vs Link vs NavLink in react router DOM and react bootstrap?
- What is the difference '<Toolbar />' and '{ Toolbar() }' in react render?
More Query from same tag
- Why my state argument when creating my Redux-Reducer is not being updated?
- How can I test functions that are provided by context using jest and react-testing-library?
- The tag <ReactComponent> is unrecognized in this browser
- How to send JSON object from express server to next js page?
- Changing state in useEffect doesn't change interface
- The data in the input box cannot be changed
- How to define conditional string types in Typescript like flow?
- Jest / RTL Failure -- MUI V5 + Emotion Theme Issue
- How can I toggle between 3 components in ReactJS
- Put HTML or images in the xAxis
- Accessing localStorage in next.js
- Why this.state is undefined in react native?
- webpack react ingress-nginx kubernetes shows Bad Gateway
- What is the "React way" if toggling visibility of a component using its own "close" button?
- Cannot get URL from getDownloadURL from firebase
- Can we generate object with jsx fields?
- React Typed Children with TypeScript
- how to use Sass variables and mixins with react js
- Update className attribute
- Background image not set for React button
- Downloading ByteArray(application/pdf or application/octect-stream) response using react js
- how to expand only one collapse panel in ant-design
- How to generate a random number every 5 seconds in React.js?
- How to access the below json value
- How to use bounds with dynamic markers in react-leaflet
- React typescript import syntax issues with vscode
- How to change the background and text color within button using button onClick in React JS
- React ReferenceError:unknown node of type "JSXSpreadChild" with constructor "Node"
- How do I set up a bootstrap in reactjs to be responsive?
- React, how do I persist the state of side drawer selected list item with router?