Merge pull request #443 from Giphy/fix/fetch-priority

react-components: ignore fetch priority

.changeset/lucky-laws-relate.md

@@ -0,0 +1,7 @@
+---
+'@giphy/react-components': patch
+---
+
+In order to avoid console warnings, dont' use fetchPriority prop until next React release
+
+https://github.com/facebook/react/issues/27233

packages/react-components/package.json

@@ -35,8 +35,8 @@
         "@storybook/react-vite": "^7.1.0",
         "@storybook/storybook-deployer": "^2.8.16",
         "@storybook/testing-library": "^0.2.0",
-        "@types/react": "^18.2.15",
-        "@types/react-dom": "^18.2.7",
+        "@types/react": "^18.2.79",
+        "@types/react-dom": "^18.2.25",
         "@types/storybook__react": "^5.2.1",
         "@types/throttle-debounce": "^2.1.0",
         "awesome-typescript-loader": "^5.2.1",

packages/react-components/src/components/gif.tsx

@@ -64,6 +64,8 @@ type GifProps = {
     borderRadius?: number
     tabIndex?: number
     style?: any
+    // issues with this will be resolved in the next React release:
+    // https://github.com/facebook/react/issues/27233
     fetchPriority?: 'auto' | 'high' | 'low'
 }
 
@@ -103,7 +105,6 @@ const Gif = ({
     borderRadius = 4,
     style,
     tabIndex,
-    fetchPriority,
 }: Props) => {
     // only fire seen once per gif id
     const [hasFiredSeen, setHasFiredSeen] = useState(false)
@@ -275,9 +276,6 @@ const Gif = ({
                 <img
                     ref={image}
                     suppressHydrationWarning
-                    // @ts-ignore - fetchPriority is not recognized by React typescript
-                    // eslint-disable-next-line react/no-unknown-property
-                    fetchpriority={fetchPriority}
                     className={[Gif.imgClassName, loadedClassname].join(' ')}
                     src={shouldShowMedia ? rendition.url : placeholder}
                     style={{ background }}

yarn.lock

@@ -2586,8 +2586,8 @@ __metadata:
     "@storybook/react-vite": ^7.1.0
     "@storybook/storybook-deployer": ^2.8.16
     "@storybook/testing-library": ^0.2.0
-    "@types/react": ^18.2.15
-    "@types/react-dom": ^18.2.7
+    "@types/react": ^18.2.79
+    "@types/react-dom": ^18.2.25
     "@types/storybook__react": ^5.2.1
     "@types/throttle-debounce": ^2.1.0
     awesome-typescript-loader: ^5.2.1
@@ -5528,12 +5528,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18.2.7":
-  version: 18.2.7
-  resolution: "@types/react-dom@npm:18.2.7"
+"@types/react-dom@npm:^18.2.25":
+  version: 18.2.25
+  resolution: "@types/react-dom@npm:18.2.25"
   dependencies:
-    "@types/react": "npm:*"
-  checksum: e02ea908289a7ad26053308248d2b87f6aeafd73d0e2de2a3d435947bcea0422599016ffd1c3e38ff36c42f5e1c87c7417f05b0a157e48649e4a02f21727d54f
+    "@types/react": "*"
+  checksum: 85f9278d6456c6cdc76da6806a33b472588cdd029b08dde32e8b5636b25a3eae529b4ac2e08c848a3d7ca44e4e97ee9a3df406c96fa0768de935c8eed6e07590
   languageName: node
   linkType: hard
 
@@ -5564,7 +5564,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18.2.15":
+"@types/react@npm:*, @types/react@npm:>=16":
   version: 18.2.15
   resolution: "@types/react@npm:18.2.15"
   dependencies:
@@ -5575,6 +5575,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:^18.2.79":
+  version: 18.2.79
+  resolution: "@types/react@npm:18.2.79"
+  dependencies:
+    "@types/prop-types": "*"
+    csstype: ^3.0.2
+  checksum: 85aa96e0e88725c84d8fc5f04f10a4da6a1f507dde33557ac9cc211414756867721264bfefd9e02bae1288ce2905351d949b652b931e734ea24519ee5c625138
+  languageName: node
+  linkType: hard
+
 "@types/scheduler@npm:*":
   version: 0.16.3
   resolution: "@types/scheduler@npm:0.16.3"