Question:

I have multiple setState in my component onload. My page is re-rendering on click of dropdown values, because on-click I'm storing those values via setState.

Here to stop re-rendering on click, I'm using the below code.

shouldComponentUpdate() { return false }

Now because of the above function, My values are not storing in state on page load. Is there anything I need to do extra ?

You states don't show a change in your component, because it doesn't rereder at all, since you have returned false from the shouldComponentUpdate method.

If you want to restrict rendering on particular state change then just check for that state and return false else return true like

shouldComponentUpdate(nextProps, nextState) { if(this.state.dropdownVal != nextState.dropdownval) { return false } return true }

However its not such a bad thing to rerender because React rendering process is very efficient and you would want to show the updated state in the DOM more often then not.

You have to use the shouldComponentUpdate() like

shouldComponentUpdate(nextProps, nextState) { return !Immutable.is(this.state.synergy, nextState.synergy) }

The answer: you need to re-render. There's nothing wrong with this. However, if you have a lot of logic built in to your render statements (which you shouldn't do, logic should be happening in your containers) this can be cumbersome. Use element key's efficiently, and there's nothing wrong with re-rendering. You're looking for a way to subvert the design patterns of React, when you should instead be conforming in MOST cases.