BlobProvider in loop

[anthares-dev]

After updating to v2.0 appeared an unexpected behavior in BlobProvider: during rendering on the fly, the props "loading" and "url" changes continuously, making the document re-render multiple times, as you can see in the following screenshot:

BlobProvider is located in the parent component "ReportGenerator.js", the document is located in the child component "MyDocument". Here an extract of my code:

 <BlobProvider
              document={
                <MyDocument
                  data={{
                    # here props and states
                  }}
                />
              }
            >
              {({ blob, url, loading, error }) => {
                console.log(blob, url, "loading:", loading, "error:", error);
                if (error) {
                  return <Alert color="danger">{error}</Alert>;
                }
                else if (!blob) {
                  return (
                    <div className="text-center text-one">
                      <div
                        className="loading mr-2"
                        style={{
                          position: "sticky",
                          width: "25px",
                          height: "25px",
                        }}
                      />
                      Loading...
                    </div>
                  );
                } else {
                  return (
                    <Fragment>
                      <div className="d-flex justify-content-center mb-3">
                        <PDFDownloadLink
                          // document={<TestDocument data={data} />}
                          document={
                            <MyDocument
                              data={{
                              # here props and states
                              }}
                            />
                          }
                          fileName={`${props.kitData._id}.pdf`}
                        >
                          <Button color="primary" className="text-uppercase">
                            <span
                              className="iconsminds-down-1 mr-1"
                              aria-hidden="true"
                            ></span>{" "}
                            <IntlMessages id="button.download-report" />
                          </Button>
                        </PDFDownloadLink>
                      </div>
                      <PDFViewer
                        width="100%"
                        style={{
                          minHeight: "900px",
                          border: "none",
                        }}
                        className=""
                      >
                        <MyDocument
                         data={{
                              # here props and states
                              }}
                        />
                      </PDFViewer>
                    </Fragment>
                  );
                }
              }}
            </BlobProvider>

In MyDocument component there is no state change, just StyleSheet.create method and React Pdf components taking data from props. Props and states in parent component don't change as well.

After this multiple re-rendering, the pdf at last appears. Moreover, if I use Dynamic content, like the page number in a footer, the re-rendering go in infinite loop, crashing the browser tab.

Have you and idea why this is happening? Thank you so much in advance!

Desktop:

• OS: [Windows]
• Browser [chrome]
• React-pdf version [2.0.12]

[jmkeith]

I posted a link to this where this occurs based off the examples provided in the documentation.

https://codesandbox.io/s/jolly-ishizaka-5e3im shows the errors that I've been getting. This happens in any version greater than 2.0

[Davide-Gheri]

I have the same problem, usePDF seems to go into an infinite loop. I think the problem resides in the pdf function, its onChange is called in a loop(?)

Also, usePDF does not remove the pdf change listener, because of that even after unmounting the component that uses usePDF the loop continues, eventually freezing the browser.

[bgbbmm]

This is extremely annoying for me. Moreover, these various blobs getting created seem to disappear so if you try to open the pdf in a new tab it may or may not be found, and it may or may not be downloadable after that point.

[merveillevaneck]

ca confirm this is stuck in an infinite loop originating from generating a blob inside of react-pdf itself. There is nothing that can be done to use the hook in this state. its completely unusable at this stage, but this just creates problems for use cases that need to control the download flow of the pdf.

Tl;dr simply calling the hook in a remix component immediately loops at infintum and blocks the js thread doing so.