Javascript – Conditionally rendering two Material-UI dialogs in React.js causing issues

i am conditionally rendering these dialogs , initial value of compareData is FALSE , and the compareData value is stored in redux Store . so when i change it to TRUE i can view the Dialog1 and if i again change it to FALSE i can view the Dialog2 but Dialog2 is re-rendering all the child components inside that again . so API calls also going again and fetching the same data . i want to avoid this unwanted API calls and re-render . additional info – i am using react-class-components .

{compareData ? (<Dialog1>
                <AccountDetails/>
                  <Dialog1>):
      (<Dialog2>
       <product/>
       <items/>
       <customers/>
       </Dialog2>
    )}