Performance Issue causing document to reload, even when file is stored in state

[kian-supportinglines]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

I'm not sure if this is a bug or a feature request. This issue was never solved, and I'm encountering it whereby, when I tried to switch pages, the entire document reloads. I even tried it by copying this example exactly (albeit replacing import { Document, Page } from 'react-pdf'; with import {Document, Page} from 'react-pdf/dist/esm/entry.webpack';. I've also tried initializing a React state with the file, and passing the state to the file prop with no luck.

Just wanted to know if there is a workaround for this/and or an upcoming fix.

Steps to reproduce

Using the 'Display single page with navigation' recipe from the recipes page in the github wiki. Every time I click the next page/prev page button, the entire document reloads.

Expected behavior

Page changing, but document not reloading

Actual behavior

Document is reloading

Additional information

I also tried using pdfjs-dist directly and somehow got it working. I can confirm that it doesn't reload the document whenever the page changes, so something is wrong here.

Environment

- **Browser (if applicable)**: Chrome 96
- **React-PDF version**: 5.6.0
- **React version**: 17.0.2
- **Webpack version (if applicable)**: using create-react-app

[kian-supportinglines]

Sorry in advance if this has been already asked

[egimenos]

I am facing the same exact issue.

Basically, everytime the component rerenders when clicking the next page button, the onLoadSuccess event gets triggered.

Just in case, this is my code. The effect that retrieves the pdf url is only triggered once, I checked since this was my first guess.

import { useState, useEffect, useCallback } from "react";
import { getFileUrl } from "../services/storageService";
import { Document, Page } from "react-pdf/dist/esm/entry.webpack";
import { Text, Box, Button, Flex } from "@chakra-ui/react";

const PDFViewer = ({ fileName }) => {
  const [url, setUrl] = useState(null);
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  const setFileUrl = useCallback(async () => {
    const url = await getFileUrl({ fileName });
    setUrl(url);
  }, [fileName]);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
    setPageNumber(1);
  }

  function changePage(offset) {
    setPageNumber((prevPageNumber) => prevPageNumber + offset);
  }

  function previousPage() {
    changePage(-1);
  }

  function nextPage() {
    changePage(1);
  }

  useEffect(() => {
    setFileUrl();
  }, [setFileUrl]);

  const PDF = () => {
    return (
      <Box>
        <Document file={url} onLoadSuccess={onDocumentLoadSuccess}>
          <Page pageNumber={pageNumber} />
        </Document>
        <Flex align="center">
          <Text mr="4">
            Página {pageNumber || (numPages ? 1 : "--")} de {numPages || "--"}
          </Text>
          <Button mr="2" disabled={pageNumber <= 1} onClick={previousPage}>
            Previa
          </Button>
          <Button disabled={pageNumber >= numPages} onClick={nextPage}>
            Siguiente
          </Button>
        </Flex>
      </Box>
    );
  };

  if (!url) return <div>No hay URL</div>;

  return <PDF />;
};

export default PDFViewer;

EDIT I have been reading this comment: #308 (comment)
And also this article in the wiki https://github.com/wojtekmaj/react-pdf/wiki/Frequently-Asked-Questions#react-pdf-reloads-itself-with-every-render-whats-going-on
But still can't see why my Document keeps reloading. I'm saving the url of the file in the state as a string, so unless I'm missing something Document should not detect any change in the file prop.

[wojtekmaj]

Hmm, can't reproduce on CodeSandbox:

https://codesandbox.io/s/react-pdf-with-navigation-koh2pp

Is anyone able to modify this in a way so that the bug could be reproduced?

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.

[CarlosNZ]

https://codesandbox.io/s/react-pdf-with-navigation-koh2pp

Is anyone able to modify this in a way so that the bug could be reproduced?

This issue is stale, but I had the exact same problem so I might as well explain what it was. In the above sandbox, the reason you're not seeing the issue is that you're returning the JSX directly, whereas the original is returning a Functional Component.

In your sandbox, you can replicate the problem by changing the last part to this:

  const Component = () => (
    <div class="App">
      <Document file="sample.pdf" onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      <div>
        <p>
          Page {pageNumber || (numPages ? 1 : "--")} of {numPages || "--"}
        </p>
        <button type="button" disabled={pageNumber <= 1} onClick={previousPage}>
          Previous
        </button>
        <button
          type="button"
          disabled={pageNumber >= numPages}
          onClick={nextPage}
        >
          Next
        </button>
      </div>
    </div>
  );

  return <Component />;

And similarly, the problem faced by @egimenos can be fixed by doing the reverse:

const PDF = > (
      <Box>
        <Document file={url} onLoadSuccess={onDocumentLoadSuccess}>
          <Page pageNumber={pageNumber} />
        </Document>
        <Flex align="center">
          <Text mr="4">
            Página {pageNumber || (numPages ? 1 : "--")} de {numPages || "--"}
          </Text>
          <Button mr="2" disabled={pageNumber <= 1} onClick={previousPage}>
            Previa
          </Button>
          <Button disabled={pageNumber >= numPages} onClick={nextPage}>
            Siguiente
          </Button>
        </Flex>
      </Box>
    );

  if (!url) return <div>No hay URL</div>;

  return PDF;