title: React.js component rendering the same images from Instagram repeatedly if current route is refreshed
body: <p>I need help with figuring out how not to make my react.js component rerender same images from Instagram and add them to the exisitng in the view.</p>
  
  <p>I have a <a href="https://github.com/JeromeFitz/react-instafeed" rel="nofollow noreferrer">react-instafeed</a> container in my react.js component, which is fetching 20 latest images from my Instagram account and renders them in a neat grid. The <a href="https://github.com/JeromeFitz/react-instafeed" rel="nofollow noreferrer">react-instafeed</a> element is a wrapper around the popular <a href="http://instafeedjs.com/" rel="nofollow noreferrer">instafeed.js</a> framework and makes the same methods and configurations available in react.js environment. </p>
  
  <p>On initial load it fetches the images and renders them. However, if the current route is refreshed (by pressing the button in the header navigation, for example), it fetches all 20 images once again and adds them in the view, and so on.</p>
  
  <p>I tried dealing with it by setting something like 'loaded' in the state in the 'success, or 'after' methods of the instafeed, but that's clearly not working and is anti-pattern.</p>
  
  <p>I tried doing it with componentDidMount, with the result of a doubled http call on initial rendering and 20x2 images at once.</p>
  
  <p>Apparently, setting state is not the right strategy in this case. How could I either prevent the element from making a n-th call to Instagram, or maybe destroying the element on componentWillUpdate()? </p>