A React GIF picker becomes reliable when search state has one owner. Treat a query and category as the identity of a search, with loaded pages, loading state, and errors attached to that identity.
Fetch through an authenticated server route when the provider uses a secret API key. React code running in the browser cannot keep a shared credential private.
Model the transitions first
A fresh query should clear the previous pagination cursor and start a new result set. Loading another page should retain existing results. An error on page two should leave page one usable. Closing the picker should cancel pending work where possible.
Use a request sequence or query-keyed data library to prevent a slow response for happy from overwriting the newer results for happy dance. Debouncing reduces requests but does not, by itself, prevent this race.
Keep selection separate from search. Clicking a result should select it or open its preview according to the UI contract. Posting to the conversation should remain an explicit action, particularly in tools that can send to other people.
Treat every card as an accessible control
Use a button with a descriptive accessible name for a selectable GIF. Preserve visible focus, a logical keyboard order, and an Escape path when the picker is inside a dialog. Announce loading and empty results without announcing every animated frame.
Start with thumbnails and animate a limited number of previews. Respect reduced-motion preferences and offer a way to pause motion. A grid full of autoplaying media can become expensive and distracting before any network quota is reached.
Add the provider contract deliberately
GIFs.so returns items, total, nextOffset, and a separate sponsors array. Follow nextOffset until it is null; reset it when inputs change. Render sponsor cards with a clear label and keep them out of GIF selection behavior.
Use returned width and height to reserve layout space. Treat mp4Url as optional and keep a GIF or static fallback. The integration guide documents the fields and verified-account requirements.
Test user-visible outcomes
Test typing two queries quickly, closing during a request, loading the final page, retrying a failed later page, and selecting with the keyboard. Confirm that a sponsor cannot be mistaken for a GIF and that an expired session has a useful recovery path. The performance guide covers the next stage after these state transitions work.