React HOCs vs Helper Classes?
If I have an HOC takes some context and passes down helpers functions based on that context, is that abuse of an HOC? Essentially it is the same thing as just utilizing a helper class.
For example:
import helpers from './helpers'
function withHelpers(WrappedComponent, context) {
return class extends React.Component {
render() {
let contextualHelpers = {...// bind all helpers to context}
return (
<WrappedComponent {...this.props} {...contextualHelpers} />
)
}
}
}
Am I better off just have a helper class in this case since I am not utilizing any lifecycle methods, state, etc. what the HOC is providing? Then instead of calling withHelpers inside the consuming component I would just instantiate the helper with the context in the constructor this.helper = new Helper(context).
In other words, is this abusing the HOC concept?
javascript reactjs frontend web-frontend higher-order-components
asked Nov 14 '18 at 0:14
Adam Thompson
7721818
add a comment |
If I have an HOC takes some context and passes down helpers functions based on that context, is that abuse of an HOC? Essentially it is the same thing as just utilizing a helper class.
For example:
import helpers from './helpers'
function withHelpers(WrappedComponent, context) {
return class extends React.Component {
render() {
let contextualHelpers = {...// bind all helpers to context}
return (
<WrappedComponent {...this.props} {...contextualHelpers} />
)
}
}
}
Am I better off just have a helper class in this case since I am not utilizing any lifecycle methods, state, etc. what the HOC is providing? Then instead of calling withHelpers inside the consuming component I would just instantiate the helper with the context in the constructor this.helper = new Helper(context).
In other words, is this abusing the HOC concept?
javascript reactjs frontend web-frontend higher-order-components
asked Nov 14 '18 at 0:14
Adam Thompson
7721818
What iscontext? Is it React context? The answer depends on what exactly is going on in the component.
– estus
Nov 14 '18 at 7:02
@Adam Would you mind accepting my answer?
– Masious
Nov 14 '18 at 14:13
@estus it's just some argument that needs to be used to create the helpers, not a react context.
– Adam Thompson
Nov 14 '18 at 16:46
add a comment |
If I have an HOC takes some context and passes down helpers functions based on that context, is that abuse of an HOC? Essentially it is the same thing as just utilizing a helper class.
For example:
import helpers from './helpers'
function withHelpers(WrappedComponent, context) {
return class extends React.Component {
render() {
let contextualHelpers = {...// bind all helpers to context}
return (
<WrappedComponent {...this.props} {...contextualHelpers} />
)
}
}
}
Am I better off just have a helper class in this case since I am not utilizing any lifecycle methods, state, etc. what the HOC is providing? Then instead of calling withHelpers inside the consuming component I would just instantiate the helper with the context in the constructor this.helper = new Helper(context).
In other words, is this abusing the HOC concept?
javascript reactjs frontend web-frontend higher-order-components
asked Nov 14 '18 at 0:14
Adam Thompson
7721818
If I have an HOC takes some context and passes down helpers functions based on that context, is that abuse of an HOC? Essentially it is the same thing as just utilizing a helper class.
For example:
import helpers from './helpers'
function withHelpers(WrappedComponent, context) {
return class extends React.Component {
render() {
let contextualHelpers = {...// bind all helpers to context}
return (
<WrappedComponent {...this.props} {...contextualHelpers} />
)
}
}
}
Am I better off just have a helper class in this case since I am not utilizing any lifecycle methods, state, etc. what the HOC is providing? Then instead of calling withHelpers inside the consuming component I would just instantiate the helper with the context in the constructor this.helper = new Helper(context).
In other words, is this abusing the HOC concept?
javascript reactjs frontend web-frontend higher-order-components
javascript reactjs frontend web-frontend higher-order-components
asked Nov 14 '18 at 0:14
Adam Thompson
7721818
asked Nov 14 '18 at 0:14
Adam Thompson
7721818
asked Nov 14 '18 at 0:14
Adam Thompson
7721818
asked Nov 14 '18 at 0:14
Adam Thompson
7721818
asked Nov 14 '18 at 0:14
Adam Thompson
7721818
7721818
What iscontext? Is it React context? The answer depends on what exactly is going on in the component.
– estus
Nov 14 '18 at 7:02
@Adam Would you mind accepting my answer?
– Masious
Nov 14 '18 at 14:13
@estus it's just some argument that needs to be used to create the helpers, not a react context.
– Adam Thompson
Nov 14 '18 at 16:46
add a comment |
What iscontext? Is it React context? The answer depends on what exactly is going on in the component.
– estus
Nov 14 '18 at 7:02
@Adam Would you mind accepting my answer?
– Masious
Nov 14 '18 at 14:13
@estus it's just some argument that needs to be used to create the helpers, not a react context.
– Adam Thompson
Nov 14 '18 at 16:46
What is
context? Is it React context? The answer depends on what exactly is going on in the component.– estus
Nov 14 '18 at 7:02
What is
context? Is it React context? The answer depends on what exactly is going on in the component.– estus
Nov 14 '18 at 7:02
@Adam Would you mind accepting my answer?
– Masious
Nov 14 '18 at 14:13
@Adam Would you mind accepting my answer?
– Masious
Nov 14 '18 at 14:13
@estus it's just some argument that needs to be used to create the helpers, not a react context.
– Adam Thompson
Nov 14 '18 at 16:46
@estus it's just some argument that needs to be used to create the helpers, not a react context.
– Adam Thompson
Nov 14 '18 at 16:46
add a comment |
2 Answers
2
active
oldest
votes
This is possibly an antipattern because Helper and component instance aren't related. Moreover, a HOC may result in unnecessary overhead if Helper doesn't need to be instantiated on each render while it's instantiated inside render.
In this case the only benefit from a HOC is that it implements dependency injection pattern by injecting dependencies via props. If wrapped component cannot benefit from dependency injection (improved reusability and testability), a HOC can be considered an antipattern.
answered Nov 14 '18 at 17:16
estus
67.1k2198213
add a comment |
No, you're not abusing HOC concept, but, what exactly does HOC help you with in this case? Do you want to be able to have these helpers in a lot of components? If so, you can just simply instantiate the helpers as you mentioned.
Keep in mind that HOCs make your components less readable, as you would have to read all of the component to find out where are these helpers instantiated (in this case, other developers would have to read all of the file to reach out the final line and see export default withHelpers(FooComponent, context)!
So you're just better off with instantiating the helpers within your constructor or even componentDidMount.
answered Nov 14 '18 at 0:55
Masious
354214
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291350%2freact-hocs-vs-helper-classes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
This is possibly an antipattern because Helper and component instance aren't related. Moreover, a HOC may result in unnecessary overhead if Helper doesn't need to be instantiated on each render while it's instantiated inside render.
In this case the only benefit from a HOC is that it implements dependency injection pattern by injecting dependencies via props. If wrapped component cannot benefit from dependency injection (improved reusability and testability), a HOC can be considered an antipattern.
answered Nov 14 '18 at 17:16
estus
67.1k2198213
add a comment |
This is possibly an antipattern because Helper and component instance aren't related. Moreover, a HOC may result in unnecessary overhead if Helper doesn't need to be instantiated on each render while it's instantiated inside render.
In this case the only benefit from a HOC is that it implements dependency injection pattern by injecting dependencies via props. If wrapped component cannot benefit from dependency injection (improved reusability and testability), a HOC can be considered an antipattern.
answered Nov 14 '18 at 17:16
estus
67.1k2198213
add a comment |
This is possibly an antipattern because Helper and component instance aren't related. Moreover, a HOC may result in unnecessary overhead if Helper doesn't need to be instantiated on each render while it's instantiated inside render.
In this case the only benefit from a HOC is that it implements dependency injection pattern by injecting dependencies via props. If wrapped component cannot benefit from dependency injection (improved reusability and testability), a HOC can be considered an antipattern.
answered Nov 14 '18 at 17:16
estus
67.1k2198213
This is possibly an antipattern because Helper and component instance aren't related. Moreover, a HOC may result in unnecessary overhead if Helper doesn't need to be instantiated on each render while it's instantiated inside render.
In this case the only benefit from a HOC is that it implements dependency injection pattern by injecting dependencies via props. If wrapped component cannot benefit from dependency injection (improved reusability and testability), a HOC can be considered an antipattern.
answered Nov 14 '18 at 17:16
estus
67.1k2198213
answered Nov 14 '18 at 17:16
estus
67.1k2198213
answered Nov 14 '18 at 17:16
estus
67.1k2198213
answered Nov 14 '18 at 17:16
estus
67.1k2198213
67.1k2198213
add a comment |
add a comment |
No, you're not abusing HOC concept, but, what exactly does HOC help you with in this case? Do you want to be able to have these helpers in a lot of components? If so, you can just simply instantiate the helpers as you mentioned.
Keep in mind that HOCs make your components less readable, as you would have to read all of the component to find out where are these helpers instantiated (in this case, other developers would have to read all of the file to reach out the final line and see export default withHelpers(FooComponent, context)!
So you're just better off with instantiating the helpers within your constructor or even componentDidMount.
answered Nov 14 '18 at 0:55
Masious
354214
add a comment |
No, you're not abusing HOC concept, but, what exactly does HOC help you with in this case? Do you want to be able to have these helpers in a lot of components? If so, you can just simply instantiate the helpers as you mentioned.
Keep in mind that HOCs make your components less readable, as you would have to read all of the component to find out where are these helpers instantiated (in this case, other developers would have to read all of the file to reach out the final line and see export default withHelpers(FooComponent, context)!
So you're just better off with instantiating the helpers within your constructor or even componentDidMount.
answered Nov 14 '18 at 0:55
Masious
354214
add a comment |
No, you're not abusing HOC concept, but, what exactly does HOC help you with in this case? Do you want to be able to have these helpers in a lot of components? If so, you can just simply instantiate the helpers as you mentioned.
Keep in mind that HOCs make your components less readable, as you would have to read all of the component to find out where are these helpers instantiated (in this case, other developers would have to read all of the file to reach out the final line and see export default withHelpers(FooComponent, context)!
So you're just better off with instantiating the helpers within your constructor or even componentDidMount.
answered Nov 14 '18 at 0:55
Masious
354214
No, you're not abusing HOC concept, but, what exactly does HOC help you with in this case? Do you want to be able to have these helpers in a lot of components? If so, you can just simply instantiate the helpers as you mentioned.
Keep in mind that HOCs make your components less readable, as you would have to read all of the component to find out where are these helpers instantiated (in this case, other developers would have to read all of the file to reach out the final line and see export default withHelpers(FooComponent, context)!
So you're just better off with instantiating the helpers within your constructor or even componentDidMount.
answered Nov 14 '18 at 0:55
Masious
354214
answered Nov 14 '18 at 0:55
Masious
354214
answered Nov 14 '18 at 0:55
Masious
354214
answered Nov 14 '18 at 0:55
Masious
354214
354214
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291350%2freact-hocs-vs-helper-classes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What is
context? Is it React context? The answer depends on what exactly is going on in the component.– estus
Nov 14 '18 at 7:02
@Adam Would you mind accepting my answer?
– Masious
Nov 14 '18 at 14:13
@estus it's just some argument that needs to be used to create the helpers, not a react context.
– Adam Thompson
Nov 14 '18 at 16:46