title: shouldComponentUpdate for React Tabs
body: <p>I'm trying to stop re-rendering of tabs. I'll try to explain as best as I can, but <em>please</em> let me know if you need more info or more code.</p>
  
  <p>Currently, I have an app set up inside the tabs which serve as steps that the user has to make to come to the final result. In the first tab, I have states that the user has to set up to apply discounts. It uses </p>
  
  <pre><code>componentDidMount = () =&gt; {
          this.updateProductsBasedOnState();
      };
  </code></pre>
  
  <p>Same as tab two. The issue I have is when you're on tab one and you apply whatever discounts/changes you want and you go to tab two, the tab one will reset once you come back to it. It rerenders. </p>
  
  <p>I've tried using React's Pure Component and also setting up just the <code>shouldComponentUpdate</code>.</p>
  
  <p>If I add the following shouldComponentUpdate on the Parent, it doesn't let tabs be changed at all. If I set it on any of the children, changing the state does not work (as in, you can't add any discounts):</p>
  
  <pre><code>shouldComponentUpdate(nextProps, nextState) {
          return this.state.value != nextState.value;
      }
  </code></pre>
  
  <p>EDIT: <a href="https://codesandbox.io/s/blissful-sun-6ssjn?fontsize=14" rel="nofollow noreferrer">Here's the sandbox link of my tabs!</a> </p>
  
  <p>What else can I try? Can someone point me in the right direction? Thanks!</p>