React-pdf: Loading a page before the previous one loaded causes setState warning on an unmounted component

[pxFIN]

Before you start - checklist

• [x] I followed instructions in documentation written for my React-PDF version
• [x] I have checked if this bug is not already reported
• [x] I have checked if an issue is not listed in Known issues

Description

When rendering one page at a time (first time, no batch loading of pages) state update is done on unmounted component

If renderTextLayer and renderAnnotationLayer is set to false there are no warning messages

Steps to reproduce

In the example code multiple quick clicks to PrevPage/NextPage buttons create warning messages. (if buttons are pressed in slower intervals there are no warning/error messages)

Trace: example.log

If tried similarly on react-pdf test page (load from file (pdf file has to have multiple pages)
http://projekty.wojtekmaj.pl/react-pdf/test

Click next button a couple of times quickly there is a error message

react-pdf-test-site.log

Expected behavior

No error messages

I think the question is though, Is this normal behaviour should application throttle page queries or a bug in react-pdf ?

Also i cant say if this is related but

https://github.com/wojtekmaj/react-pdf/issues/305#issuecomment-447293295

Additional information

Example code:

import React from "react";
import "./App.css";
import "react-pdf/dist/Page/AnnotationLayer.css";
import { Document, Page, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${
  pdfjs.version
}/pdf.worker.js`;

class MyPDF extends React.Component {
  constructor(props) {
    super(props);

    this.state = { numPages: null, pageNumber: 1 };
  }

  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  };

  goToPrevPage = () => {
    if (this.state.pageNumber > 1) {
      this.setState(state => ({ pageNumber: state.pageNumber - 1 }));
    }
  };
  goToNextPage = () => {
    if (this.state.pageNumber < this.state.numPages) {
      this.setState(state => ({ pageNumber: state.pageNumber + 1 }));
    }
  };

  render() {
    const { pageNumber, numPages } = this.state;

    return (
      <div className="mypdf-container">
        <button onClick={this.goToPrevPage}>Prev</button>
        <button onClick={this.goToNextPage}>Next</button>

        <Document
          file="./example.pdf"
          onLoadSuccess={this.onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} width={600} />
        </Document>

        <p>
          Page {pageNumber} of {numPages}
        </p>
      </div>
    );
  }
}

export default MyPDF;

Environment

• Browser: Chrome latest, Firefox latest
• React-PDF version: 4.0.0
• React version: 16.7
• Webpack version: create-react-app/react-scripts 2.1.2, webpack 4.19.1

[wojtekmaj]

Hi,
thanks for your report. I see what was wrong - we were setting state even on planned exception thrown by cancelling a promise that was getting text layer items. Fixed - expect it to land with the next release.

[wojtekmaj]

Stunning report, BTW :) Took me seconds to understand and reproduce.

🙏

[pxFIN]

Thanks, i try to be thorough but not perfectionist ;-)

I can confirm the new release 4.0.2 fixes the problems! Very quick fix, thanks!

Btw, thinking out loud on react-pdf github project page there's a link to Online Demo which goes to your personal webpage.. is this correct or should the link go to the test page ? Also there wasn't a link to the test page on your personal website and i only learned about it from this project github issues

[wojtekmaj]

No problem!

Regarding the website, well it should not lead to my personal webpage, but to a project page set up on my personal domain :) I suggest we could move the rest of this discussion to #336 since it suits the topic better :)

[DragomirRhv]

I got the same issue now.
Browser: Chrome latest, Firefox latest
React-PDF version: 5.0.0
React version: 16.12.0
Webpack version:

4.42.0

It is imported in this way:
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

[DragomirRhv]

@pxFIN Do you have the same issue now !?