Instafeed component renders multiple times

[akolybelnikov]

I have an Instafeed with 20 latest images on my home page. Everytime I hit the home button in the navbar, the component renders the 20 images once again, adding them to the ones already rendered.
What's the way to prevent this behavior either by cleaning the rendered images, or by preventing images to be fetched once again?
Thanks.

[ralfpatric]

I have the exact same issue. Did you manage to find a fix?

[akolybelnikov]

@ralfpatric, yes, I have. There’s a hook called shouldComponentUpdate
https://reactjs.org/docs/react-component.html
If you return false in it, your props will not update on route refresh. However, this is true for all the props. So, if you still need some other props of your component to update, wrap the instafeed in a separate component with it’s own hooks first.

[JeromeFitz]

@akolybelnikov I will be looking into this to see if we should handled the shouldComponentUpdate or leave it to the implementer. I can think of a scenario where we may want it to update, but will give it more thought this weekend. Will also look to implement / merge the #21 and the v1-beta branches for a larger scale update this weekend.

At the very least we can add in some notes in the README, and for now keeping this issue open in case others like @ralfpatric are experiencing the same behavior.

Thank you for sharing!

[JeromeFitz]

Sorry this has taken me some time, hoping to make time on Saturday to circle back.

[alpinstang]

This didn't work in my implementation. I'm not sure what to do except remove the duplicates after they render in a hidden div, then display them after "cleaning up".

const instafeedTarget = 'instafeed';

const template = `<div class="col-md-4"><div class="insta-post"><a href='{{link}}' target='_blank' class='instafeed__item'>
                          <img class='instafeed__item__background img-responsive' src='{{image}}' />
                            <div class='instafeed__item__overlay'>
                              <div class='instafeed__item__overlay--inner'>
                                <span class='instafeed__item__caption'>{{model.short_caption}}</span>
                                <span class='instafeed__item__location'>{{location}}</span>
                              </div>
                            </div>
                        </a></div></div>`;

class Instagram extends Component {

    componentDidMount() {

    }

    shouldComponentUpdate() {
        return false;
    }

    render() {
        return (
            <div id={instafeedTarget}>
                <Instafeed
                    limit='6'
                    ref='instafeed'
                    resolution='standard_resolution'
                    sortBy='most-recent'
                    target={instafeedTarget}
                    template={template}
                    userId={process.env.REACT_APP_INSTAGRAM_USER_ID}
                    clientId={process.env.REACT_APP_INSTAGRAM_CLIENT_ID}
                    accessToken={process.env.REACT_APP_INSTAGRAM_ACCESS_TOKEN}
                />
            </div>
        )
    }
}
export default Instagram;

And then I'm importing that in a parent component (It's a single page site). I left out irrelevant markup, but there are other components like <Header /> etc.

import Instagram from './Instagram';
...
function Facebook({ activePage }) {
    return (
<Col md={6}>
       <Instagram />
</Col>
);
}

export default Facebook;

[aagentah]

@akolybelnikov shouldComponentUpdate trick fixed it for me.

[alpinstang]

FYI I also used the API from Instagram, and it still caused the same issue, so I just kept my hack of removing dupes and left it there. Doesn't affect anything and page load time is irrelevant with such a small number of images I needed. Thanks for the plugin.

[sassanh]

The code in your render method should be migrated to a function that is called by componentDidMount and componentDidUpdate (if relevant props has changed.)

[yogeshR5]

@akolybelnikov and @danjonesdev shouldComponentUpdate() return false didn't work for me.

import Instafeed from "react-instafeed";

class Instagram extends Component {
constructor(props) {
super(props);
}
shouldComponentUpdate() {
console.log("falseshouldComponentUpdate",);
return false;
}
componentDidUpdate() {}
render() {
const instafeedTarget = "instafeed";
return (

      <div id={instafeedTarget} className="row row-tb-5 row-rl-5">
        <Instafeed
          limit="9"
          ref="instafeed"
          resolution="thumbnail"
          sortBy="most-recent"
          target={instafeedTarget}
          userId="8535964756"
          clientId="416dace8d8584f3098ba93db035c4a86"
          accessToken="8535964756.54da896.4b8652f4fca840e283714af01983fdcf"
          template="<a href=&quot;{{link}}&quot; target=&quot;_blank&quot; class=&quot;instafeed__item&quot;><div class=&quot;instagram-widget__item col-xs-4&quot;><img class=&quot;instafeed__item__background&quot; src=&quot;{{image}}&quot; /><div class=&quot;instafeed__item__overlay&quot;><div class=&quot;instafeed__item__overlay--inner&quot;><p class=&quot;instafeed__item__caption&quot;>{{model.short_caption}}</p><p class=&quot;instafeed__item__location&quot;>{{location}}</p></div></div></div></a>"
        />
      </div>
    </div>
  </div>
);

}
}

export default Instagram