Race condition when loading files sometimes renders the wrong SVG

[Teemu Vartiainen]

Describe the bug
If the src prop changes while the HTTP request for the previous SVG is still in progress, it sometimes leads to the wrong SVG being displayed.

To Reproduce

1. Set src prop to point at an external (slow) SVG file
2. Quickly change the prop to point to a different (fast) SVG
3. Race condition in the network requests sometimes displays the wrong SVG, depending on which HTTP request completest last

Expected behavior
The rendered SVG should always match the current src prop.

Link to repl or repo
Repro repo: https://github.com/Sentri/react-inlinesvg-bug-repro
Live demo: https://codepen.io/sentri/project/full/XvWQJB (tested in Chromium)

Additional context
I believe this is the chain of events that reproduces this issue:

1. props.src is set to 1.svg
2. 1.svg starts downloading
3. props.src is set to 2.svg
4. 2.svg starts downloading
5. 2.svg finishes downloading, handleLoad is called and 2.svg is displayed
6. 1.svg finishes downloading, handleLoad is called and 1.svg is displayed
7. User sees 1.svg even though the current props.src is set to 2.svg

Potential fix: 922a1c79

Run npx envinfo --system --binaries --npmPackages react-inlinesvg

System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 Intel(R) Xeon(R) CPU E5-1650 v4 @ 3.60GHz
    Memory: 18.16 GB / 31.90 GB
  Binaries:
    Node: 12.14.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    react-inlinesvg: 2.2.2 => 2.2.2

[Hamidreza Amini]

I have the same problem !!

[Gil Barbara]

Fixed in 2659e48
Available in 2.3.0