[GH-ISSUE #1007] next/image: hydration-level onError replay via useLayoutEffect #222

New issue

Closed

opened 2026-05-06 12:38:19 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 12:38:19 +02:00

Owner

Originally created by @Divkix on GitHub (May 1, 2026).
Original GitHub issue: https://github.com/cloudflare/vinext/issues/1007

Identified during review of #1004.

Context

The upstream Next.js PR (https://github.com/vercel/next.js/pull/93209) uses a useLayoutEffect + img.src = img.src pattern to replay error events that are lost before React hydration completes. The vinext implementation in #1004 uses a simpler useRef-based dedup that doesn't handle this case.

Impact

Images that fail to load before React hydration completes (e.g., during SSR streaming or initial HTML parse) won't fire onError callbacks. This means error state management in parent components won't trigger for pre-hydration failures.

Suggested approach

Add a useLayoutEffect that, when onError is provided, sets img.src = img.src on the ref to re-trigger the load/error cycle after hydration. This mirrors the upstream Next.js fix in vercel/next.js#93209.

Originally created by @Divkix on GitHub (May 1, 2026). Original GitHub issue: https://github.com/cloudflare/vinext/issues/1007 Identified during review of #1004. ## Context The upstream Next.js PR (https://github.com/vercel/next.js/pull/93209) uses a `useLayoutEffect` + `img.src = img.src` pattern to replay error events that are lost before React hydration completes. The vinext implementation in #1004 uses a simpler `useRef`-based dedup that doesn't handle this case. ## Impact Images that fail to load *before* React hydration completes (e.g., during SSR streaming or initial HTML parse) won't fire `onError` callbacks. This means error state management in parent components won't trigger for pre-hydration failures. ## Suggested approach Add a `useLayoutEffect` that, when `onError` is provided, sets `img.src = img.src` on the ref to re-trigger the load/error cycle after hydration. This mirrors the upstream Next.js fix in vercel/next.js#93209.