From e61820e04d0f7aab3cdbfe2b6955467c4f6618d7 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Mon, 17 Oct 2022 10:40:40 -0400
Subject: [PATCH] Fix typo and add comment to `next/image` SyntheticEvent
 (#41480)

- Fix typo
- Add comment
- Link back to react docs
- Remove unnecessary variable
---
 packages/next/client/image.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 535ba688d6703..1e2ce25b6ec9e 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -268,11 +268,14 @@ function handleLoading(
       setBlurComplete(true)
     }
     if (onLoadRef?.current) {
+      // Since we don't have the SyntheticEvent here,
+      // we must create one with the same shape.
+      // See https://reactjs.org/docs/events.html
       const event = new Event('load')
       Object.defineProperty(event, 'target', { writable: false, value: img })
       let prevented = false
       let stopped = false
-      const sytheticEvent = {
+      onLoadRef.current({
         ...event,
         nativeEvent: event,
         currentTarget: img,
@@ -288,8 +291,7 @@ function handleLoading(
           stopped = true
           event.stopPropagation()
         },
-      }
-      onLoadRef.current(sytheticEvent)
+      })
     }
     if (onLoadingCompleteRef?.current) {
       onLoadingCompleteRef.current(img)