React will not create a new nested component as expected

-4

In my application I have a page change mechanism that uses one of the properties of parent component state.

So I do something like:

class mainComponent{

  state={

    mypage:null

  }



  onclickhandler(page){

    this.setState({mypage:page});

  }



  render(){

    return <div>{page}</div>

  };

}

In my "page" property I have various input fields and other components.

When I change the page, all inputs get updated with new values. However, my custom nested components are never re-created.

Instead, reach just calls componentDidUpdate on them.

Is there a way to force it to construct a new nested component somehow?

edited Nov 21 '18 at 20:36

c-chavez

2,28221733

asked Nov 21 '18 at 19:55

AnKing

373513

Shouldn't onclickhandler(page){ be like onclickhandler = (page) => {?

– NoobieSatan
Nov 21 '18 at 19:57

Plus I guess state can't have ; , it should probably be like state={ mypage:null }( without ;)

– NoobieSatan
Nov 21 '18 at 19:59

There is just so much wrong with your code. You are having mypage in state and then you are doing this.setState(page) in your handler, You should probably do something like this this.setState({mypage: page}) Also What is page when you did something like this <div>{page}</div>?

– NoobieSatan
Nov 21 '18 at 20:01

i corrected those typos... question is still relevant

– AnKing
Nov 21 '18 at 20:28

1

there is too many missing details, create Minimal, Complete, and Verifiable example

– xadm
Nov 21 '18 at 20:53

|
show 3 more comments

-4

In my application I have a page change mechanism that uses one of the properties of parent component state.

So I do something like:

class mainComponent{

  state={

    mypage:null

  }



  onclickhandler(page){

    this.setState({mypage:page});

  }



  render(){

    return <div>{page}</div>

  };

}

In my "page" property I have various input fields and other components.

When I change the page, all inputs get updated with new values. However, my custom nested components are never re-created.

Instead, reach just calls componentDidUpdate on them.

Is there a way to force it to construct a new nested component somehow?

edited Nov 21 '18 at 20:36

c-chavez

2,28221733

asked Nov 21 '18 at 19:55

AnKing

373513

Shouldn't onclickhandler(page){ be like onclickhandler = (page) => {?

– NoobieSatan
Nov 21 '18 at 19:57

Plus I guess state can't have ; , it should probably be like state={ mypage:null }( without ;)

– NoobieSatan
Nov 21 '18 at 19:59

There is just so much wrong with your code. You are having mypage in state and then you are doing this.setState(page) in your handler, You should probably do something like this this.setState({mypage: page}) Also What is page when you did something like this <div>{page}</div>?

– NoobieSatan
Nov 21 '18 at 20:01

i corrected those typos... question is still relevant

– AnKing
Nov 21 '18 at 20:28

1

there is too many missing details, create Minimal, Complete, and Verifiable example

– xadm
Nov 21 '18 at 20:53

|
show 3 more comments

-4

In my application I have a page change mechanism that uses one of the properties of parent component state.

So I do something like:

class mainComponent{

  state={

    mypage:null

  }



  onclickhandler(page){

    this.setState({mypage:page});

  }



  render(){

    return <div>{page}</div>

  };

}

In my "page" property I have various input fields and other components.

When I change the page, all inputs get updated with new values. However, my custom nested components are never re-created.

Instead, reach just calls componentDidUpdate on them.

Is there a way to force it to construct a new nested component somehow?

edited Nov 21 '18 at 20:36

c-chavez

2,28221733

asked Nov 21 '18 at 19:55

AnKing

373513

In my application I have a page change mechanism that uses one of the properties of parent component state.

So I do something like:

class mainComponent{

  state={

    mypage:null

  }



  onclickhandler(page){

    this.setState({mypage:page});

  }



  render(){

    return <div>{page}</div>

  };

}

In my "page" property I have various input fields and other components.

When I change the page, all inputs get updated with new values. However, my custom nested components are never re-created.

Instead, reach just calls componentDidUpdate on them.

Is there a way to force it to construct a new nested component somehow?

reactjs

edited Nov 21 '18 at 20:36

c-chavez

2,28221733

asked Nov 21 '18 at 19:55

AnKing

373513

edited Nov 21 '18 at 20:36

c-chavez

2,28221733

asked Nov 21 '18 at 19:55

AnKing

373513

edited Nov 21 '18 at 20:36

c-chavez

2,28221733

edited Nov 21 '18 at 20:36

c-chavez

2,28221733

edited Nov 21 '18 at 20:36

c-chavez

2,28221733

asked Nov 21 '18 at 19:55

AnKing

373513

asked Nov 21 '18 at 19:55

AnKing

373513

asked Nov 21 '18 at 19:55

AnKing

373513

Shouldn't onclickhandler(page){ be like onclickhandler = (page) => {?

– NoobieSatan
Nov 21 '18 at 19:57

Plus I guess state can't have ; , it should probably be like state={ mypage:null }( without ;)

– NoobieSatan
Nov 21 '18 at 19:59

There is just so much wrong with your code. You are having mypage in state and then you are doing this.setState(page) in your handler, You should probably do something like this this.setState({mypage: page}) Also What is page when you did something like this <div>{page}</div>?

– NoobieSatan
Nov 21 '18 at 20:01

i corrected those typos... question is still relevant

– AnKing
Nov 21 '18 at 20:28

1

there is too many missing details, create Minimal, Complete, and Verifiable example

– xadm
Nov 21 '18 at 20:53

|
show 3 more comments

Shouldn't onclickhandler(page){ be like onclickhandler = (page) => {?

– NoobieSatan
Nov 21 '18 at 19:57

Plus I guess state can't have ; , it should probably be like state={ mypage:null }( without ;)

– NoobieSatan
Nov 21 '18 at 19:59

There is just so much wrong with your code. You are having mypage in state and then you are doing this.setState(page) in your handler, You should probably do something like this this.setState({mypage: page}) Also What is page when you did something like this <div>{page}</div>?

– NoobieSatan
Nov 21 '18 at 20:01

i corrected those typos... question is still relevant

– AnKing
Nov 21 '18 at 20:28

1

there is too many missing details, create Minimal, Complete, and Verifiable example

– xadm
Nov 21 '18 at 20:53

Shouldn't onclickhandler(page){ be like onclickhandler = (page) => {?

– NoobieSatan
Nov 21 '18 at 19:57

Plus I guess state can't have ; , it should probably be like state={ mypage:null }( without ;)

– NoobieSatan
Nov 21 '18 at 19:59

There is just so much wrong with your code. You are having mypage in state and then you are doing this.setState(page) in your handler, You should probably do something like this this.setState({mypage: page}) Also What is page when you did something like this <div>{page}</div>?

– NoobieSatan
Nov 21 '18 at 20:01

i corrected those typos... question is still relevant

– AnKing
Nov 21 '18 at 20:28

there is too many missing details, create Minimal, Complete, and Verifiable example

– xadm
Nov 21 '18 at 20:53

|
show 3 more comments

1 Answer
1

active

oldest

votes

React won't recreate component when it's not needed - it's a part of optimizations and general way react works.

When 'new', 'expected' component exists (the same type, the same or no key id) it only receives updated props.

Updating props sometimes doesn't force rerendering (it's guaranteed for state updates). PureComponent compares props shallowly, you can check shouldComponentUpdate (should return true to force render).

edited Nov 21 '18 at 21:13

answered Nov 21 '18 at 20:48

xadm

1,615248

How can you use componentShouldUpdate to force re-render?

– NoobieSatan
Nov 21 '18 at 20:56

I ended up using key to re-render the internal components. Thanks for the solution!

– AnKing
Nov 21 '18 at 21:22

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
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419615%2freact-will-not-create-a-new-nested-component-as-expected%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

React won't recreate component when it's not needed - it's a part of optimizations and general way react works.

When 'new', 'expected' component exists (the same type, the same or no key id) it only receives updated props.

edited Nov 21 '18 at 21:13

answered Nov 21 '18 at 20:48

xadm

1,615248

How can you use componentShouldUpdate to force re-render?

– NoobieSatan
Nov 21 '18 at 20:56

I ended up using key to re-render the internal components. Thanks for the solution!

– AnKing
Nov 21 '18 at 21:22

add a comment |

React won't recreate component when it's not needed - it's a part of optimizations and general way react works.

When 'new', 'expected' component exists (the same type, the same or no key id) it only receives updated props.

edited Nov 21 '18 at 21:13

answered Nov 21 '18 at 20:48

xadm

1,615248

How can you use componentShouldUpdate to force re-render?

– NoobieSatan
Nov 21 '18 at 20:56

I ended up using key to re-render the internal components. Thanks for the solution!

– AnKing
Nov 21 '18 at 21:22

add a comment |

React won't recreate component when it's not needed - it's a part of optimizations and general way react works.

When 'new', 'expected' component exists (the same type, the same or no key id) it only receives updated props.

edited Nov 21 '18 at 21:13

answered Nov 21 '18 at 20:48

xadm

1,615248

React won't recreate component when it's not needed - it's a part of optimizations and general way react works.

When 'new', 'expected' component exists (the same type, the same or no key id) it only receives updated props.

edited Nov 21 '18 at 21:13

answered Nov 21 '18 at 20:48

xadm

1,615248

edited Nov 21 '18 at 21:13

answered Nov 21 '18 at 20:48

xadm

1,615248

answered Nov 21 '18 at 20:48

xadm

1,615248

answered Nov 21 '18 at 20:48

xadm

1,615248

How can you use componentShouldUpdate to force re-render?

– NoobieSatan
Nov 21 '18 at 20:56

I ended up using key to re-render the internal components. Thanks for the solution!

– AnKing
Nov 21 '18 at 21:22

add a comment |

How can you use componentShouldUpdate to force re-render?

– NoobieSatan
Nov 21 '18 at 20:56

I ended up using key to re-render the internal components. Thanks for the solution!

– AnKing
Nov 21 '18 at 21:22

How can you use componentShouldUpdate to force re-render?

– NoobieSatan
Nov 21 '18 at 20:56

I ended up using key to re-render the internal components. Thanks for the solution!

– AnKing
Nov 21 '18 at 21:22

add a comment |

draft saved

draft discarded

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu