title: How to prevent re-rendering of random colours in React
body: <p>I've assigned a random colour to three image icons upon rendering. However when I click a button to render a dialog popup, the colours of the icons get re-rendered again. How do I prevent this from happening?</p>
  
  <pre><code>const colours = [blue[800], green[800], lime[500], brown[500], 
  grey[500], yellow[800], blueGrey[500],
  orange[800], purple[800], red[800], pink[800], indigo[800], cyan[500], teal[500],];
  const colour = () =&gt;  colours[Math.floor(Math.random() * colours.length)];
  </code></pre>
  
  <pre><code>handleClick= () =&gt; {
      this.setState({
          openDialog: true
      }); 
  }
  </code></pre>
  
  <pre><code>render() {
      return (
      &lt;div&gt;
          &lt;Button onClick={() =&gt; this.handleClick()}  variant="contained" &gt;
          Post
          &lt;/Button&gt; 
  
          &lt;Avatar  style={{backgroundColor: colour()}}&gt;S&lt;/Avatar&gt;
          &lt;Avatar  style={{backgroundColor: colour()}}&gt;S&lt;/Avatar&gt;
          &lt;Avatar  style={{backgroundColor: colour()}}&gt;S&lt;/Avatar&gt;
  
          &lt;Dialog
          keepMounted
          fullWidth = "true"
          onClose={this.handleClose}
          aria-labelledby="customized-dialog-title"
          open={this.state.openDialog}
          &gt;
          &lt;/Dialog&gt;
      &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>Codesandbox link: <a href="https://codesandbox.io/s/quirky-bouman-8p2zb" rel="nofollow noreferrer">https://codesandbox.io/s/quirky-bouman-8p2zb</a></p>