style: remove useless React.Fragment tag on next/image (#48997)

### What? remove useless React.Fragment tag ### Why? <img /> is a single element, No need `<></>` as an outer wrapper ### How?
vercel · May 1, 2023 · d23b160 · d23b160
1 parent 25ba8a7
commit d23b160
Showing 1 changed file with 85 additions and 90 deletions.
diff --git a/packages/next/src/client/image.tsx b/packages/next/src/client/image.tsx
@@ -418,101 +418,96 @@ const ImageElement = forwardRef<HTMLImageElement | null, ImageElementProps>(
   ) => {
     loading = isLazy ? 'lazy' : loading
     return (
-      <>
-        <img
-          {...rest}
-          {...getDynamicProps(fetchPriority)}
-          loading={loading}
-          width={widthInt}
-          height={heightInt}
-          decoding="async"
-          data-nimg={fill ? 'fill' : '1'}
-          className={className}
-          style={{ ...imgStyle, ...blurStyle }}
-          // It's intended to keep `loading` before `src` because React updates
-          // props in order which causes Safari/Firefox to not lazy load properly.
-          // See https://github.com/facebook/react/issues/25883
-          {...imgAttributes}
-          ref={useCallback(
-            (img: ImgElementWithDataProp | null) => {
-              if (forwardedRef) {
-                if (typeof forwardedRef === 'function') forwardedRef(img)
-                else if (typeof forwardedRef === 'object') {
-                  // @ts-ignore - .current is read only it's usually assigned by react internally
-                  forwardedRef.current = img
-                }
-              }
-              if (!img) {
-                return
+      <img
+        {...rest}
+        {...getDynamicProps(fetchPriority)}
+        loading={loading}
+        width={widthInt}
+        height={heightInt}
+        decoding="async"
+        data-nimg={fill ? 'fill' : '1'}
+        className={className}
+        style={{ ...imgStyle, ...blurStyle }}
+        // It's intended to keep `loading` before `src` because React updates
+        // props in order which causes Safari/Firefox to not lazy load properly.
+        // See https://github.com/facebook/react/issues/25883
+        {...imgAttributes}
+        ref={useCallback(
+          (img: ImgElementWithDataProp | null) => {
+            if (forwardedRef) {
+              if (typeof forwardedRef === 'function') forwardedRef(img)
+              else if (typeof forwardedRef === 'object') {
+                // @ts-ignore - .current is read only it's usually assigned by react internally
+                forwardedRef.current = img
               }
-              if (onError) {
-                // If the image has an error before react hydrates, then the error is lost.
-                // The workaround is to wait until the image is mounted which is after hydration,
-                // then we set the src again to trigger the error handler (if there was an error).
-                // eslint-disable-next-line no-self-assign
-                img.src = img.src
-              }
-              if (process.env.NODE_ENV !== 'production') {
-                if (!srcString) {
-                  console.error(
-                    `Image is missing required "src" property:`,
-                    img
-                  )
-                }
-                if (img.getAttribute('alt') === null) {
-                  console.error(
-                    `Image is missing required "alt" property. Please add Alternative Text to describe the image for screen readers and search engines.`
-                  )
-                }
+            }
+            if (!img) {
+              return
+            }
+            if (onError) {
+              // If the image has an error before react hydrates, then the error is lost.
+              // The workaround is to wait until the image is mounted which is after hydration,
+              // then we set the src again to trigger the error handler (if there was an error).
+              // eslint-disable-next-line no-self-assign
+              img.src = img.src
+            }
+            if (process.env.NODE_ENV !== 'production') {
+              if (!srcString) {
+                console.error(`Image is missing required "src" property:`, img)
               }
-              if (img.complete) {
-                handleLoading(
-                  img,
-                  srcString,
-                  placeholder,
-                  onLoadRef,
-                  onLoadingCompleteRef,
-                  setBlurComplete,
-                  unoptimized
+              if (img.getAttribute('alt') === null) {
+                console.error(
+                  `Image is missing required "alt" property. Please add Alternative Text to describe the image for screen readers and search engines.`
                 )
               }
-            },
-            [
-              srcString,
-              placeholder,
-              onLoadRef,
-              onLoadingCompleteRef,
-              setBlurComplete,
-              onError,
-              unoptimized,
-              forwardedRef,
-            ]
-          )}
-          onLoad={(event) => {
-            const img = event.currentTarget as ImgElementWithDataProp
-            handleLoading(
-              img,
-              srcString,
-              placeholder,
-              onLoadRef,
-              onLoadingCompleteRef,
-              setBlurComplete,
-              unoptimized
-            )
-          }}
-          onError={(event) => {
-            // if the real image fails to load, this will ensure "alt" is visible
-            setShowAltText(true)
-            if (placeholder === 'blur') {
-              // If the real image fails to load, this will still remove the placeholder.
-              setBlurComplete(true)
             }
-            if (onError) {
-              onError(event)
+            if (img.complete) {
+              handleLoading(
+                img,
+                srcString,
+                placeholder,
+                onLoadRef,
+                onLoadingCompleteRef,
+                setBlurComplete,
+                unoptimized
+              )
             }
-          }}
-        />
-      </>
+          },
+          [
+            srcString,
+            placeholder,
+            onLoadRef,
+            onLoadingCompleteRef,
+            setBlurComplete,
+            onError,
+            unoptimized,
+            forwardedRef,
+          ]
+        )}
+        onLoad={(event) => {
+          const img = event.currentTarget as ImgElementWithDataProp
+          handleLoading(
+            img,
+            srcString,
+            placeholder,
+            onLoadRef,
+            onLoadingCompleteRef,
+            setBlurComplete,
+            unoptimized
+          )
+        }}
+        onError={(event) => {
+          // if the real image fails to load, this will ensure "alt" is visible
+          setShowAltText(true)
+          if (placeholder === 'blur') {
+            // If the real image fails to load, this will still remove the placeholder.
+            setBlurComplete(true)
+          }
+          if (onError) {
+            onError(event)
+          }
+        }}
+      />
     )
   }
 )
@@ -546,7 +541,7 @@ const Image = forwardRef<HTMLImageElement | null, ImageProps>(
     forwardedRef
   ) => {
     const configContext = useContext(ImageConfigContext)
-    const config: ImageConfig = useMemo(() => {
+    const config = useMemo<ImageConfig>(() => {
       const c = configEnv || configContext || imageConfigDefault
       const allSizes = [...c.deviceSizes, ...c.imageSizes].sort((a, b) => a - b)
       const deviceSizes = c.deviceSizes.sort((a, b) => a - b)