Unmount image before mounting next one

hooks/usePrevious.js

@@ -0,0 +1,11 @@
+import { useRef, useEffect } from "react";
+
+export default function usePrevious(value) {
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}

pages/store/item/[slug].js

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import React, {useState, useEffect} from 'react'
 import Head from 'next/head'
 import Router from 'next/router'
 import {FormController, IntegerInput, Button} from '~/components/form'
@@ -10,6 +10,7 @@ import Modal from '~/components/modal'
 
 import useCart, {useSetCart} from '~/hooks/useCart'
 import styles from './style.module.css'
+import usePrevious from '~/hooks/usePrevious'
 
 Item.getInitialProps = async function({ctx: {axios, query: {slug}}}){
   const {data: item} = await axios.get(`/api/items/by-slug/${slug}`)
@@ -33,7 +34,16 @@ export default function Item({item}){
   // Pick first one with featured flag or 0
   const featuredIndex = item.images.reduce((p, im, i) => ((p !== undefined) ? p : (im.featured ? i : undefined)), undefined) || 0
   const [selectedIndex, setSelected] = useState(featuredIndex);
+  const lastImage = usePrevious(selectedIndex);
   const [imageModalVisible, setImageModalVisible] = useState(false);
+  const [imageChanged, setImageChanged] = useState(false);
+
+  useEffect(() => {
+    if (selectedIndex !== lastImage)
+      setImageChanged(true);
+    else
+      setImageChanged(false);
+  }, [selectedIndex, lastImage]);
 
   const numInCart = cart?.items?.find(i => i.item.uuid === item.uuid)?.count || 0
 
@@ -67,8 +77,8 @@ export default function Item({item}){
               {item.images && item.images.length > 1 &&
                 <div className={styles.imageSelector}>
                   {item.images.map((image, index) => (
-                    <picture>
-                      <source srcset={`/api/images/${image.uuid}/thumb.webp`} type="image/webp"/>
+                    <picture key={image.uuid}>
+                      <source srcSet={`/api/images/${image.uuid}/thumb.webp`} type="image/webp"/>
                       <img key={image.uuid}
                         onClick={()=>setSelected(index)}
                         className={index === selectedIndex ? styles.selectedImage : undefined}
@@ -84,10 +94,12 @@ export default function Item({item}){
                     <Icon icon="chevron_left" />
                   </button>
                   <div className={styles.fullImage}>
-                    <picture>
-                      <source srcSet={`/api/images/${item.images[selectedIndex].uuid}/large.webp`} type="image/webp"/>
-                      <img src={`/api/images/${item.images[selectedIndex].uuid}/large.png`} onClick={() => setImageModalVisible(true)} />
-                    </picture>
+                    {!imageChanged && (
+                      <picture>
+                        <source srcSet={`/api/images/${item.images[selectedIndex].uuid}/large.webp`} type="image/webp"/>
+                        <img src={`/api/images/${item.images[selectedIndex].uuid}/large.png`} onClick={() => setImageModalVisible(true)} />
+                      </picture>
+                    )}
                   </div>
                   <button onClick={() => setSelected(index => (index + 1) % item.images.length)}>
                     <Icon icon="chevron_right" />