Constructed instances in React state
I don't like a ton of logic in my classes. Sometimes, I want to pull out something and make a new type (like what used to be standard coding). If I have some utils/Dev.js like
function Dev(x)
this.x = x
Dev.prototype.inc = function()
this.x = this.x+1
If I were to instantiate a React Component with this in the constructor
this.state.dev = new Dev(42)
this.state.dev is not gonna have any access to this, so it can't inc. Did I miss something or are constructed instances useless here?
reactjs
asked Nov 15 '18 at 5:39
HaroldHarold
350211
add a comment |
I don't like a ton of logic in my classes. Sometimes, I want to pull out something and make a new type (like what used to be standard coding). If I have some utils/Dev.js like
function Dev(x)
this.x = x
Dev.prototype.inc = function()
this.x = this.x+1
If I were to instantiate a React Component with this in the constructor
this.state.dev = new Dev(42)
this.state.dev is not gonna have any access to this, so it can't inc. Did I miss something or are constructed instances useless here?
reactjs
asked Nov 15 '18 at 5:39
HaroldHarold
350211
1
Your goal is to create an instance onstateproperty? If so, using instances'incmethod would violate states' immutability principle - you don't mutate state. Your logic appears wrong here. Maybe you just need a separate component fornew Devso you keep its state in its own state
– Julius Dzidzevičius
Nov 15 '18 at 6:29
@SkyHigh yes that's correct but this is just a simplified example. i mean, it would be nice to pull out inc-like, type-specific logic from the class and for it to live in a protected state inside a type.
– Harold
Nov 15 '18 at 17:17
Hm.. Typescript would help you here I think, but I haven't used it with React.
– Julius Dzidzevičius
Nov 15 '18 at 17:38
add a comment |
I don't like a ton of logic in my classes. Sometimes, I want to pull out something and make a new type (like what used to be standard coding). If I have some utils/Dev.js like
function Dev(x)
this.x = x
Dev.prototype.inc = function()
this.x = this.x+1
If I were to instantiate a React Component with this in the constructor
this.state.dev = new Dev(42)
this.state.dev is not gonna have any access to this, so it can't inc. Did I miss something or are constructed instances useless here?
reactjs
asked Nov 15 '18 at 5:39
HaroldHarold
350211
I don't like a ton of logic in my classes. Sometimes, I want to pull out something and make a new type (like what used to be standard coding). If I have some utils/Dev.js like
function Dev(x)
this.x = x
Dev.prototype.inc = function()
this.x = this.x+1
If I were to instantiate a React Component with this in the constructor
this.state.dev = new Dev(42)
this.state.dev is not gonna have any access to this, so it can't inc. Did I miss something or are constructed instances useless here?
reactjs
reactjs
asked Nov 15 '18 at 5:39
HaroldHarold
350211
asked Nov 15 '18 at 5:39
HaroldHarold
350211
asked Nov 15 '18 at 5:39
HaroldHarold
350211
asked Nov 15 '18 at 5:39
HaroldHarold
350211
asked Nov 15 '18 at 5:39
HaroldHarold
350211
350211
1
Your goal is to create an instance onstateproperty? If so, using instances'incmethod would violate states' immutability principle - you don't mutate state. Your logic appears wrong here. Maybe you just need a separate component fornew Devso you keep its state in its own state
– Julius Dzidzevičius
Nov 15 '18 at 6:29
@SkyHigh yes that's correct but this is just a simplified example. i mean, it would be nice to pull out inc-like, type-specific logic from the class and for it to live in a protected state inside a type.
– Harold
Nov 15 '18 at 17:17
Hm.. Typescript would help you here I think, but I haven't used it with React.
– Julius Dzidzevičius
Nov 15 '18 at 17:38
add a comment |
1
Your goal is to create an instance onstateproperty? If so, using instances'incmethod would violate states' immutability principle - you don't mutate state. Your logic appears wrong here. Maybe you just need a separate component fornew Devso you keep its state in its own state
– Julius Dzidzevičius
Nov 15 '18 at 6:29
@SkyHigh yes that's correct but this is just a simplified example. i mean, it would be nice to pull out inc-like, type-specific logic from the class and for it to live in a protected state inside a type.
– Harold
Nov 15 '18 at 17:17
Hm.. Typescript would help you here I think, but I haven't used it with React.
– Julius Dzidzevičius
Nov 15 '18 at 17:38
1
1
Your goal is to create an instance on
state property? If so, using instances' inc method would violate states' immutability principle - you don't mutate state. Your logic appears wrong here. Maybe you just need a separate component for new Dev so you keep its state in its own state– Julius Dzidzevičius
Nov 15 '18 at 6:29
Your goal is to create an instance on
state property? If so, using instances' inc method would violate states' immutability principle - you don't mutate state. Your logic appears wrong here. Maybe you just need a separate component for new Dev so you keep its state in its own state– Julius Dzidzevičius
Nov 15 '18 at 6:29
@SkyHigh yes that's correct but this is just a simplified example. i mean, it would be nice to pull out inc-like, type-specific logic from the class and for it to live in a protected state inside a type.
– Harold
Nov 15 '18 at 17:17
@SkyHigh yes that's correct but this is just a simplified example. i mean, it would be nice to pull out inc-like, type-specific logic from the class and for it to live in a protected state inside a type.
– Harold
Nov 15 '18 at 17:17
Hm.. Typescript would help you here I think, but I haven't used it with React.
– Julius Dzidzevičius
Nov 15 '18 at 17:38
Hm.. Typescript would help you here I think, but I haven't used it with React.
– Julius Dzidzevičius
Nov 15 '18 at 17:38
add a comment |
1 Answer
1
active
oldest
votes
The Dev instance can absolutely call its inc() function. I included a snippet below to show this.
I wouldn't say constructed instances are useless it just depends how and why you use them.
The reason it might not be a good idea is because if your intention is for the component to update on changes to the instance's state (in your case, the x variable), then it won't happen because the Dev instance in the state was not directly changed via setState().
function Dev(x)
this.x = x
Dev.prototype.inc = function()
this.x = this.x+1
Dev.prototype.get = function()
return this.x
// Example class component
class Container extends React.Component
constructor(props: IAppProps)
super(props);
this.state = dev: new Dev(42);
handleInc()
this.state.dev.inc();
this.forceUpdate();
render()
return (
<div>
<h1>this.state.dev.get()</h1>
<button onClick=() => this.handleInc(); >Increment</button>
</div>
);
// Render it
ReactDOM.render(
<Container/>,
document.getElementById("react")
);<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>answered Nov 15 '18 at 7:53
Shawn AndrewsShawn Andrews
965617
that's interesting that you can rename it in the class, but i wanted to totally remove type-specific logic from the class and to keep it in a constructed instance. true that it seems that setState is too complex to deviate from its normal way of doing things.
– Harold
Nov 15 '18 at 17:20
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%2f53313088%2fconstructed-instances-in-react-state%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The Dev instance can absolutely call its inc() function. I included a snippet below to show this.
I wouldn't say constructed instances are useless it just depends how and why you use them.
The reason it might not be a good idea is because if your intention is for the component to update on changes to the instance's state (in your case, the x variable), then it won't happen because the Dev instance in the state was not directly changed via setState().
function Dev(x)
this.x = x
Dev.prototype.inc = function()
this.x = this.x+1
Dev.prototype.get = function()
return this.x
// Example class component
class Container extends React.Component
constructor(props: IAppProps)
super(props);
this.state = dev: new Dev(42);
handleInc()
this.state.dev.inc();
this.forceUpdate();
render()
return (
<div>
<h1>this.state.dev.get()</h1>
<button onClick=() => this.handleInc(); >Increment</button>
</div>
);
// Render it
ReactDOM.render(
<Container/>,
document.getElementById("react")
);<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>answered Nov 15 '18 at 7:53
Shawn AndrewsShawn Andrews
965617
that's interesting that you can rename it in the class, but i wanted to totally remove type-specific logic from the class and to keep it in a constructed instance. true that it seems that setState is too complex to deviate from its normal way of doing things.
– Harold
Nov 15 '18 at 17:20
add a comment |
The Dev instance can absolutely call its inc() function. I included a snippet below to show this.
I wouldn't say constructed instances are useless it just depends how and why you use them.
The reason it might not be a good idea is because if your intention is for the component to update on changes to the instance's state (in your case, the x variable), then it won't happen because the Dev instance in the state was not directly changed via setState().
function Dev(x)
this.x = x
Dev.prototype.inc = function()
this.x = this.x+1
Dev.prototype.get = function()
return this.x
// Example class component
class Container extends React.Component
constructor(props: IAppProps)
super(props);
this.state = dev: new Dev(42);
handleInc()
this.state.dev.inc();
this.forceUpdate();
render()
return (
<div>
<h1>this.state.dev.get()</h1>
<button onClick=() => this.handleInc(); >Increment</button>
</div>
);
// Render it
ReactDOM.render(
<Container/>,
document.getElementById("react")
);<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>answered Nov 15 '18 at 7:53
Shawn AndrewsShawn Andrews
965617
that's interesting that you can rename it in the class, but i wanted to totally remove type-specific logic from the class and to keep it in a constructed instance. true that it seems that setState is too complex to deviate from its normal way of doing things.
– Harold
Nov 15 '18 at 17:20
add a comment |
The Dev instance can absolutely call its inc() function. I included a snippet below to show this.
I wouldn't say constructed instances are useless it just depends how and why you use them.
The reason it might not be a good idea is because if your intention is for the component to update on changes to the instance's state (in your case, the x variable), then it won't happen because the Dev instance in the state was not directly changed via setState().
function Dev(x)
this.x = x
Dev.prototype.inc = function()
this.x = this.x+1
Dev.prototype.get = function()
return this.x
// Example class component
class Container extends React.Component
constructor(props: IAppProps)
super(props);
this.state = dev: new Dev(42);
handleInc()
this.state.dev.inc();
this.forceUpdate();
render()
return (
<div>
<h1>this.state.dev.get()</h1>
<button onClick=() => this.handleInc(); >Increment</button>
</div>
);
// Render it
ReactDOM.render(
<Container/>,
document.getElementById("react")
);<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>answered Nov 15 '18 at 7:53
Shawn AndrewsShawn Andrews
965617
The Dev instance can absolutely call its inc() function. I included a snippet below to show this.
I wouldn't say constructed instances are useless it just depends how and why you use them.
The reason it might not be a good idea is because if your intention is for the component to update on changes to the instance's state (in your case, the x variable), then it won't happen because the Dev instance in the state was not directly changed via setState().
function Dev(x)
this.x = x
Dev.prototype.inc = function()
this.x = this.x+1
Dev.prototype.get = function()
return this.x
// Example class component
class Container extends React.Component
constructor(props: IAppProps)
super(props);
this.state = dev: new Dev(42);
handleInc()
this.state.dev.inc();
this.forceUpdate();
render()
return (
<div>
<h1>this.state.dev.get()</h1>
<button onClick=() => this.handleInc(); >Increment</button>
</div>
);
// Render it
ReactDOM.render(
<Container/>,
document.getElementById("react")
);<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>function Dev(x)
this.x = x
Dev.prototype.inc = function()
this.x = this.x+1
Dev.prototype.get = function()
return this.x
// Example class component
class Container extends React.Component
constructor(props: IAppProps)
super(props);
this.state = dev: new Dev(42);
handleInc()
this.state.dev.inc();
this.forceUpdate();
render()
return (
<div>
<h1>this.state.dev.get()</h1>
<button onClick=() => this.handleInc(); >Increment</button>
</div>
);
// Render it
ReactDOM.render(
<Container/>,
document.getElementById("react")
);<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>function Dev(x)
this.x = x
Dev.prototype.inc = function()
this.x = this.x+1
Dev.prototype.get = function()
return this.x
// Example class component
class Container extends React.Component
constructor(props: IAppProps)
super(props);
this.state = dev: new Dev(42);
handleInc()
this.state.dev.inc();
this.forceUpdate();
render()
return (
<div>
<h1>this.state.dev.get()</h1>
<button onClick=() => this.handleInc(); >Increment</button>
</div>
);
// Render it
ReactDOM.render(
<Container/>,
document.getElementById("react")
);<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>answered Nov 15 '18 at 7:53
Shawn AndrewsShawn Andrews
965617
answered Nov 15 '18 at 7:53
Shawn AndrewsShawn Andrews
965617
answered Nov 15 '18 at 7:53
Shawn AndrewsShawn Andrews
965617
answered Nov 15 '18 at 7:53
Shawn AndrewsShawn Andrews
965617
965617
that's interesting that you can rename it in the class, but i wanted to totally remove type-specific logic from the class and to keep it in a constructed instance. true that it seems that setState is too complex to deviate from its normal way of doing things.
– Harold
Nov 15 '18 at 17:20
add a comment |
that's interesting that you can rename it in the class, but i wanted to totally remove type-specific logic from the class and to keep it in a constructed instance. true that it seems that setState is too complex to deviate from its normal way of doing things.
– Harold
Nov 15 '18 at 17:20
that's interesting that you can rename it in the class, but i wanted to totally remove type-specific logic from the class and to keep it in a constructed instance. true that it seems that setState is too complex to deviate from its normal way of doing things.
– Harold
Nov 15 '18 at 17:20
that's interesting that you can rename it in the class, but i wanted to totally remove type-specific logic from the class and to keep it in a constructed instance. true that it seems that setState is too complex to deviate from its normal way of doing things.
– Harold
Nov 15 '18 at 17:20
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.
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%2f53313088%2fconstructed-instances-in-react-state%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
1
Your goal is to create an instance on
stateproperty? If so, using instances'incmethod would violate states' immutability principle - you don't mutate state. Your logic appears wrong here. Maybe you just need a separate component fornew Devso you keep its state in its own state– Julius Dzidzevičius
Nov 15 '18 at 6:29
@SkyHigh yes that's correct but this is just a simplified example. i mean, it would be nice to pull out inc-like, type-specific logic from the class and for it to live in a protected state inside a type.
– Harold
Nov 15 '18 at 17:17
Hm.. Typescript would help you here I think, but I haven't used it with React.
– Julius Dzidzevičius
Nov 15 '18 at 17:38