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

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

[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: https://github.com/wojtekmaj/react-pdf/issues/308#issuecomment-443538284 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.

[github-actions[bot]]

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