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"