I am trying to load all the pages but it goes into infinate loop(basically re-rendering).
React.memo is not helping me here.
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>
));
I think, the re-rendering behaviour is logically correct because onLoadSuccess will get fire when the content is updated. As a result setPages and pages also get updated and pages re-renders the same pages again and onLoadSuccess will get fire again.(a loop basically)
But there has be any solutions to this.
Maybe you need to add a custom props check in the second argument of React.memo.
The memo HOC will only shallowly compare complex objects in the props object.
Example:
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
*/
});