test: callback ref cleanups

test/integration/link-ref/pages/child-ref-func-cleanup.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import Link from 'next/link'
+import { useCallback, useRef, useEffect, useState } from 'react'
+import { flushSync } from 'react-dom'
+
+export default function Page() {
+  const [isVisible, setIsVisible] = useState(true)
+
+  const statusRef = useRef({ wasInitialized: false, wasCleanedUp: false })
+
+  const refWithCleanup = useCallback((el) => {
+    if (!el) {
+      console.error(
+        'callback refs that returned a cleanup should never be called with null'
+      )
+      return
+    }
+
+    statusRef.current.wasInitialized = true
+    return () => {
+      statusRef.current.wasCleanedUp = true
+    }
+  }, [])
+
+  useEffect(() => {
+    const timeout = setTimeout(
+      () => {
+        flushSync(() => {
+          setIsVisible(false)
+        })
+        if (!statusRef.current.wasInitialized) {
+          console.error('callback ref was not initialized')
+        }
+        if (!statusRef.current.wasCleanedUp) {
+          console.error('callback ref was not cleaned up')
+        }
+      },
+      100 // if we hide the Link too quickly, the prefetch won't fire, failing a test
+    )
+    return () => clearTimeout(timeout)
+  }, [])
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <Link href="/" ref={refWithCleanup}>
+      Click me
+    </Link>
+  )
+}

test/integration/link-ref/test/index.test.js

@@ -84,6 +84,10 @@ describe('Invalid hrefs', () => {
       it('should handle child ref that is a function', async () => {
         await noError('/child-ref-func')
       })
+
+      it('should handle child ref that is a function that returns a cleanup function', async () => {
+        await noError('/child-ref-func-cleanup')
+      })
     }
   )
   ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
@@ -109,6 +113,10 @@ describe('Invalid hrefs', () => {
       it('should preload with child ref with function', async () => {
         await didPrefetch('/child-ref-func')
       })
+
+      it('should preload with child ref with function that returns a cleanup function', async () => {
+        await didPrefetch('/child-ref-func-cleanup')
+      })
     }
   )
 })

test/integration/next-image-new/app-dir/app/ref-cleanup/page.js

@@ -0,0 +1,43 @@
+'use client'
+import Image from 'next/image'
+import { useCallback, useEffect, useState } from 'react'
+
+export default function Home() {
+  const [displayImage, setDisplayImage] = useState(true)
+
+  const refWithCleanup = useCallback((el) => {
+    if (!el) {
+      throw new Error(
+        'callback refs that returned a cleanup should never be called with null'
+      )
+    }
+
+    return () => {
+      console.log('callback ref was cleaned up')
+    }
+  }, [])
+
+  useEffect(() => {
+    setDisplayImage(false)
+  }, [])
+
+  return (
+    <main>
+      <h1>Should call ref cleanup on unmount</h1>
+      <section>
+        {displayImage ? (
+          <div style={{ position: 'relative', width: 10, height: 10 }}>
+            <Image
+              ref={refWithCleanup}
+              priority
+              fill
+              src="/test.jpg"
+              alt="alt"
+              sizes="10px"
+            />
+          </div>
+        ) : null}
+      </section>
+    </main>
+  )
+}

test/integration/next-image-new/app-dir/test/index.test.ts

@@ -14,6 +14,7 @@ import {
   nextBuild,
   nextStart,
   renderViaHTTP,
+  retry,
   waitFor,
 } from 'next-test-utils'
 import webdriver from 'next-webdriver'
@@ -1574,6 +1575,19 @@ function runTests(mode) {
       }
     }
   })
+
+  it('should call callback ref cleanups when unmounting', async () => {
+    const browser = await webdriver(appPort, '/ref-cleanup')
+    const getLogs = async () => (await browser.log()).map((log) => log.message)
+
+    await retry(async () => {
+      expect(await getLogs()).toContain('callback ref was cleaned up')
+    })
+
+    expect(await getLogs()).not.toContain(
+      'callback refs that returned a cleanup should never be called with null'
+    )
+  })
 }
 
 describe('Image Component Default Tests', () => {