Estoy creando una página similar a la sección Películas populares de TMDB: https://www.themoviedb.org/movie con un botón que obtiene más datos para mostrar. La primera página de resultados es entregada por getStaticProps() , después de eso solo quiero obtener datos del lado del cliente. Me di cuenta de que cada vez que hago clic en algo (ya sea para mostrar la pestaña/opciones de clasificación o para cargar más contenido), no solo desencadena múltiples renderizaciones, sino que no es hasta la segunda renderización que se configuran los datos. Para ser exactos, el botón Load More activa cuatro renderizaciones, y al hacer clic en la pestaña de clasificación, se activan dos. ¿Hay alguna manera de que pueda hacer esto más eficiente?

 const PopularMediaPage = ({json, title, url}) => { const [isShowed, setIsShowed] = useState(true); // This serves to display the "Sort Results By" tab const [showSort, setShowSort] = useState(false); // This displays the actual list of sorting options const [typeOfSort, setTypeOfSort] = useState("Popularity Descending"); const [media, setMedia] = useState(json.results); const [shouldFetch, setShouldFetch] = useState(false); const count = useRef(1); const isMovie = json.results.every(e => e.hasOwnProperty("release_date")); const sortMap = [ {name: "Popularity Descending", query:"&sort_by=popularity.desc"}, {name: "Popularity Ascending", query:"&sort_by=popularity.asc"}, {name: "Rating Descending", query:"&sort_by=vote_average.desc"}, {name: "Rating Ascending", query:"&sort_by=vote_average.asc"}, {name: "Release Date Descending", query: isMovie ? "&sort_by=release_date.desc" : "&sort_by=first_air_date.desc" }, {name: "Release Date Ascending", query: isMovie ? "&sort_by=release_date.asc" : "&sort_by=first_air_date.asc" }, ]; const sortQuery = sortMap.filter(e => e.name === typeOfSort ? e.query : null)[0] const {data, error} = useSWR(shouldFetch && `${url}&page=${count.current}${sortQuery.query}`, fetcher) useEffect(() => { data && setMedia([...media, ...data]); return setShouldFetch(false); }, [media, data]) const handleLoadMore = () => { setShouldFetch(true); count.current += 1; }; return ( //...layout and html elements <SortingTab /> // with list of sorting options inside <PopularMediaResults /> // actual results to be displayed <button type="button" onClick={handleLoadMore}>Load More</button> )