Estoy usando "react-query" para llamar a una API desde un componente. A los efectos de esta pregunta, devuelvo una respuesta simulada de la API.

Cada vez que abro el menú desplegable, se llama a la función useQuery, que a su vez llama a la API simulada.

Aplicación.js

 import React from 'react'; import './style.css'; import { QueryClient, QueryClientProvider } from 'react-query'; import { DropDown } from './Dropdown.js'; const queryClient = new QueryClient(); export default function App() { return ( <QueryClientProvider client={queryClient}> <div style={{ display: 'flex', justifyContent: 'center' }}> <DropDown /> </div> </QueryClientProvider> ); }

desplegable.js

 import React from 'react'; import { useQuery } from 'react-query'; export const DropDown = () => { console.log('DropDown re-rendered'); const { data, isLoading, isError } = useQuery('API', () => { return new Promise((resolve, reject) => { console.log('API called'); resolve(['mockData']); }); }); return ( <> <select> <option> 1 </option> <option> 2 </option> </select> </> ); };

Puede encontrar la demostración aquí: https://react-quxtxd.stackblitz.io

En la consola verás que cada vez que abres el menú desplegable, se llama a useQuery.

URL del editor Stackblitz: https://stackblitz.com/edit/react-quxtxd?file=src/Dropdown.js

Como alternativa para evitar esto, puedo usar el useEffect tradicional para hacer las llamadas a la API, pero estaba buscando aprovechar la ventaja de almacenamiento en caché que proporciona useQuery, pero estoy atascado debido a este problema de "reprocesamiento".

¿Alguna sugerencia/modificación?