Data Adapter loading twice in React functional component

[mfearbyParticipant]

I’ve created a React functional component which uses a JqxGrid and a field to do a remote filter, and it’s calling the service twice for some unknown reason. The jsonplaceholder API I’m using supports a ?userId parameter so I can send a different number to filter results remotely.

If I type a different number, two requests are made to the service (one with the previous userId value, then another with the new userId value). It should only be calling it once with the new value, but I have no idea why it’s doing it twice.

I’ve created a demo in Code Sandbox to demonstrate the problem. If you open developer tools and watch for XHR requests, you’ll see that the remote service is called twice, even though I’m setting the query variable only once and the dataAdapter is only set once, too.

https://codesandbox.io/s/jqxgrid-react-function-component-0s0id

[TodorParticipant]

Hello mfearby,

I’ve updated your example and now only one request is made. Please review it.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[mfearbyParticipant]

Thanks, Todor. I could have sworn I tried it first without a useState() variable for the adapter itself (and it was always returning an empty grid), but perhaps I did something else wrong at the time. In any case, yours works a treat. Seems I don’t need useEffect() either, so that’s an added bonus. Thank you

[Author]

Posts