How can i use setstate without Re-render of component in React js?

Question

constructor(props, context) {
super(props);
this.state = {
ShowVoucher: false
 }

I want to change state of showVoucher. without Re-Render of component. i have tried like this

componentDidUpdate(prevState) {
if(prevState.showVoucher!= this.state.showVoucher){
  this.setState({ ShowVoucher: false})
}
  }

But my code stucks in infinite loop. How can i solve it? Any other solutions are welcome.

You cannot call setState inside componentDidUpdate to prevent from memory leak — Radonirina Maminiaina
– Radonirina Maminiaina, Commented May 10, 2019 at 12:32
why would you? but you could set another state(auxiliar) and when you want it to re-render set showVoucher state — Andre Shindi Fucuhara
– Andre Shindi Fucuhara, Commented May 10, 2019 at 12:35
why would you want to change the state if you don't want to re-render the component? Just stick it in a variable then. — Constantin Chirila
– Constantin Chirila, Commented May 10, 2019 at 12:47

Jayce444 · Accepted Answer · 2019-05-10 12:33:44Z

2

If you want to store a value but not have the component re-render when that value changes, it shouldn't be in the state. It should be just an instance variable, e.g.

constructor(props, context) {
    this.ShowVoucher = false;
}

and then

this.ShowVoucher = true;

Do not put things in state then try to stop their changing from causing a re-render. That's an anti-pattern.

answered May 10, 2019 at 12:33

Jayce444

9,1234 gold badges35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dave Newton Over a year ago

I didn't downvote, but "shouldComponentUpdate" exists precisely for this reason--there are perfectly acceptable things to keep in state that might not require an update. But this is a perfectly acceptable solution--the downvote confuses me.

Jayce444 Over a year ago

@DaveNewton well if you NEVER want a re-render from changing certain values, then there's no point in having them in state. However, maybe you only want changing them not to cause a re-render in certain situations, in which case a shouldComponentUpdate solution would be appropriate. I just gave this answer based on the question, which has no other context.

Dave Newton Over a year ago

That's why I said it's a perfectly acceptable solution. As you said, without context, it's impossible to know if it makes any sense.

ProblemsEverywhere · Accepted Answer · 2019-05-10 12:33:51Z

-1

Maybe what you are looking for is shouldComponentUpdate
https://reactjs.org/docs/react-component.html#shouldcomponentupdate

shouldComponentUpdate(nextProps, nextState) {
  if(this.state.showVoucher!==nextState.showVoucher){
   this.setState({ ShowVoucher: false})
   return false;
  } else return true;
}

answered May 10, 2019 at 12:33

ProblemsEverywhere

5472 silver badges9 bronze badges

3 Comments

Robin Zigmond Over a year ago

I'm not the downvoter, but using this method just to prevent UI updates, as this answer is suggesting, is officially discouraged

Dave Newton Over a year ago

@RobinZigmond That's its only purpose. "Discouraged" means "if you think you need this performance optimization, this is where you put it". I might not use it for this usecase, but it's also not a huge deal.

Amir-Mousavi Over a year ago

The question is totally wrong from the title to details, and I don't know why guys rushed to answer. it is obvious that if condition is always true and none asked for more of the code and if there is another part that changes the state. otherwise why it get stuck in infnite loop of setSTate ? also the PO does not care about all these comments and answers :D

Collectives™ on Stack Overflow

How can i use setstate without Re-render of component in React js?

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related