title: Calling a function each time a component is rendered, since componentDidMount() only triggers once
body: <p><strong>EDIT: Upon further testing i realized that componentDidMount IS behaving how i was expecting, but it seems to be a problem with my randomizing function that for some reason returns undefined if it gets run a second time, so on initial mount it gives me results, when i mount it again it returns undefined and hence nothing renders...</strong></p>
  
  <p>I have done research to understand why I am having this issue. I have a component for a webapp, which is just a banner that will render Sponsor names. Everytime this banner gets rendered I want to randomize the order in which sponsors appear. I can get this to work, but it is only happening the first time it gets rendered (on componentDidMount()) and then every time i visit any section where that component gets rendered it no longer calls componentDidMount() so it renders no content.</p>
  
  <p>At first i thought componentDidMount() should be called everytime i enter a section that is calling that component. After reading around, everywhere said that the component is being mounted once and that is why it is only calling the function once. How can I make it so it randomizes everytime I render the component?</p>
  
  <p>Here is sample of the code I'm writing.</p>
  
  <pre><code>class SponsorBanner extends React.Component {
      constructor(props){
          super(props)
          this.state = {
              randomized: []
          }
  
          this.randomizeSponsors = this.randomizeSponsors.bind(this)
      }
  
      randomizeSponsors(){
          let copy = []
          const array = ['a','b','c','d']
          let n = array.length
          let i;
  
          while(n){
              i = Math.floor(Math.random() * n--)
              copy.push(array.splice(i,1)[0])
          }
  
          let randomizedArray = copy.map((sponsor,i) =&gt; &lt;div key={i}&gt;{sponsor}&lt;/div&gt;)
  
          this.setState({randomized:randomizedArray})
  
      }
      componentDidMount(){
          this.randomizeSponsors()
      }
  
  
      render(){
  
          return (
              &lt;div&gt;
                  {this.state.randomized}
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>This component gets rendered in 2 different sections of the app. It is a very simple app and I am not even adding routing to it. It just works entirely as a SPA. When a user click a section, it renders that component. On first load if I visit a section that renders this component it displays a randomized array. If I navigate to another section and back, it renders an empty banner.</p>
  
  <p>Why is this happening and how could I work around it???</p>