Estoy tratando de cargar todas las páginas, pero entra en un bucle infinito (básicamente, se vuelve a renderizar). React.memo no me está ayudando aquí.
const PdfRender = React.memo(({ pdfURL, pages, setPages }: any) => ( <Document file={{ url: pdfURL, }} onLoadSuccess={(info) => { setPages(new Array(info._pdfInfo.numPages).fill(info._pdfInfo.numPages)); }} > {pages.map((_: any, i: number) => { return <Page pageNumber={i + 1} />; })} </Document> )); Creo que el comportamiento de renderizado es lógicamente correcto porque onLoadSuccess se activará cuando se actualice el contenido. Como resultado setPages y las pages también se actualizan y las pages vuelven a representar las mismas páginas nuevamente y onLoadSuccess se activará nuevamente (básicamente, un bucle)
Pero no ha habido ninguna solución a esto.
Tal vez necesite agregar una verificación de accesorios personalizada en el segundo argumento de React.memo .
El memo HOC solo comparará superficialmente objetos complejos en el objeto props.
Ejemplo:
const PdfRender = React.memo(({ pdfURL, pages, setPages }: any) => ( <Document file={{ url: pdfURL, }} onLoadSuccess={(info) => { setPages(new Array(info._pdfInfo.numPages).fill(info._pdfInfo.numPages)); }} > {pages.map((_: any, i: number) => { return <Page pageNumber={i + 1} />; })} </Document> ), (prevProps, nextProps) => { /* return true if passing nextProps to render would return the same result as passing prevProps to render, otherwise return false */ });