Giphy React Grid component is not working

Question

I am trying to replicate the search and masonry grid from the official documentation using their Codesandbox example.

However, when I am trying to use it, the code is not returning any gifs back.

I have verified that the JS fetch is indeed returning back gifs, it seems that the grid is not calling the fetchGifs function.

I am hitting the same issue with Carousel component as well.

Can anyone help me with this issue?

Codesandbox link for my implementation - https://codesandbox.io/s/cocky-waterfall-ny9rzk Component i was trying to use - Search and Grid from https://github.com/Giphy/giphy-js/tree/master/packages/react-components

import { GiphyFetch } from "@giphy/js-fetch-api";
import { Grid } from "@giphy/react-components";
import useDebounce from "react-use/lib/useDebounce";
import React, { useState } from "react";

export default function App() {
  const giphyFetch = new GiphyFetch("PZpYG85wQpugMlEx02GGqeKfKZ8eMdFZ");
  const [debouncedInput, setDebouncedInput] = useState<string>("");
  const [term, setTerm] = useState<string>("");
  useDebounce(() => setTerm(debouncedInput), 500, [debouncedInput]);

  const NoResults = <div className="no-results">No Results for {term}</div>;

  const fetchGifs = (offset: number) => {
    return giphyFetch.search(term, { offset, limit: 10 });
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <input
        placeholder="type to search"
        onChange={({ target: { value } }) => setDebouncedInput(value)}
        value={debouncedInput}
      />
      <Grid
        key={term}
        columns={3}
        gutter={6}
        noResultsMessage={NoResults}
        width={400}
        fetchGifs={fetchGifs}
      />
    </div>
  );
}

Answer 1

Try removing strict mode here: https://codesandbox.io/s/cocky-waterfall-ny9rzk?file=/src/index.tsx

I guess the Grid is incompatible with React 18, possibly due to the useEffect change it brings.

Alternatively you could use React 17.x

Updated looks like they've introduced a fix

https://github.com/Giphy/giphy-js/commit/dade2aa10442c9ca8e6741125071dc1053e89181