giphy paginator is greedy about fetching results about giphy-js HOT 7 CLOSED

Furthermore Caurosel's onLoaderVisible can call onFetch again, which seems like it might be able to cause a parallel set of fetches to start (the calls to this.setState look a little iffy since it can be updated asynchronously and you're not explicitly the state in functions where it's blessed to be resolved).

from giphy-js.

@kwasimensah thanks for reporting this, you're seeing this in the React Carousel? It might require this fix that I just made to the grid. I'll take a look when I'm back in the office tomorrow

from giphy-js.

Yup, this is with Carousel

from giphy-js.

@kwasimensah I released a 1.0.6 version of @giphy/react-components, this should only trigger the paginator when the end of the carousel that has the loader element is on the screen. When the loader element goes off the screen, fetching should stop.

This is the approach we've been using for quite a bit on giphy.com with our grid, and in our web extensions and it should be solid.

Not sure exactly how it went so crazy in your implementation, but my bug fix tweaks the initial state, which when set to fetch on mount, I've seen the bug you're reporting when the browser isn't in the active tab.

If you're still seeing the issue, maybe compare to our codesandbox implementation: https://codesandbox.io/s/giphyreact-components-hbmcf?file=/src/index.tsx

Or provide more details 👍

from giphy-js.

Sandbox at https://codesandbox.io/s/giphyreact-components-td1qo?file=/src/index.tsx. If I make the searchTerm the key of the component it reloads as you type. But put in the term "hello world" and open the Chrome Dev console and you can see all the requests to giphy being made.

I think we need a hook in componentWillUnmount to tell the carousel to stop fetching.

from giphy-js.

@kwasimensah can you debounce your input? I'm going to investigate this, because it shouldn't happen regardless, but here is a codesandbox with a debounced input that works:
https://codesandbox.io/s/giphyreact-components-search-example-0yrur?file=/src/index.tsx

from giphy-js.

@kwasimensah I removed the need for the debounce in version 1.0.7. Should have tested without the debounce, my bad. Still good practice to have it though, to limit network requests while the user types.

I added an unmounted instance variable to check when componentWillUnmount so we don't setState after we unmount which triggered the loop

from giphy-js.