mbrevda
Image is not re-rendered when srcList changes
Using Img component if src (aka srcList) changes its content it is not rendered. The only way to show it is to force a re-render of the component, which "fixes" its status.
Looking at the code seems that the problem is bound to useImage hook which only sets its state once. If the hook has already set its internal loading flag to false it wont re-render even if a new source was loaded since it only uses setIsLoading(false), thus blocking any new rendering within the component (since its state remain false).
This could be fixed by using the actual value of that flag, or by using a functional-update like:
setIsLoading(isLoading => !isLoading);
Sample on codesandbox.
Came here specifically to see if others also ran into this problem. Would be cool to change cache to a src-by-src approach. That way, if you change srcList, it can skip images that previously failed but still goes through your (new) srcList front-to-back. Seems like more "react"-y way while still being smart about performance and not wasting network calls
Hi guys!
I found easy workaround for this problem. You can render it like this:
<Img src={src} key={src} />
Changing key will force react to remount the component. Hope it will help someone ;)
Peace
Hi guys! I found easy workaround for this problem. You can render it like this:
<Img src={src} key={src} />Changing key will force react to remount the component. Hope it will help someone ;) Peace
I used your workaround solution, it really works now, but I get the following error in console: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
any idea why is it happening and how to solve it?
Hi guys! I found easy workaround for this problem. You can render it like this:
<Img src={src} key={src} />Changing key will force react to remount the component. Hope it will help someone ;) PeaceI used your workaround solution, it really works now, but I get the following error in console: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
any idea why is it happening and how to solve it?
I also get this error (
Ended up building my own version useImage which restarts when the src or src list changes. Here is the link to the codesandbox.
I also made a few changes to tailor to my own needs, like not throwing the error up since using error boundary to show an error fallback leads to stuff like CRA's react-error-overlay popping up in development and cache per src entry and not per src list (it just makes more sense to me).
I've added a test for this, but cannot recreate the described behavior. If you want to visually test: clone the project and run npm i && npm run dev. The test is called Change src - you can see that if the src changes, the image is reloaded.
This may have been fixed by a recent release or perhaps I misunderstood something?
Closing pending further information
