Long Render Time

Describe the bug The below code is taking about 10 seconds to render a three page document using the <PDFViewer>. The code currently iterates over a ~80 item array of objects and as the number of items in the array increases this render time gets longer.

To Reproduce I am using the following code:

import React, { Component } from 'react'
import { PDFViewer, Document, Page, View, Text } from '@react-pdf/renderer'
import { flatStrips } from './flatStrips'

class App extends Component {
  
  render() {
    return (
      <div className="App">
      
        <PDFViewer>
          <Document>
            <Page>
              {flatStrips.map((strip,i)=>(
                <View key={i}>
                  {strip.scene && <Text>{strip.scene}</Text>}
                  {strip.ie && <Text>{strip.ie}</Text>}
                  {strip.set && <Text>{strip.set}</Text>}
                  {strip.dn && <Text>{strip.dn}</Text>}
                  {strip.desc && <Text>{strip.desc}</Text>}
                </View>
              ))}
            </Page>
          </Document>
        </PDFViewer>

      </div>
    )    
  }
}

export default App;

REPL Here This contains a shorter version of the data array, as the REPL couldn’t share a link with the full data. All styles were removed to ensure that the slowness wasn’t caused by any other factors.

The REPL works fine but when using <PDFViewer> on localhost the render times are extremely slow. A full build running on a live server shaves about one second from this render time.

I have tested the render time of the Document taking <PDFViewer> out of the code and it renders in a few milliseconds. I can’t seem to work out what is causing the delay. Also of note, the browser seems to freeze as this delay is happening. When trying to use the dev tools console during the delay, it is unresponsive until the render is complete. I have tried different versions of the above code for a few days now, simplifying it in each iteration. The above code is very simple and running in its own brand new create-react-app application to ensure that no outside issues from the rest of the site are affecting it.

This issue is a concern as this sample document is only three pages long and my users will be creating documents that could be exponentially longer.

Expected behavior A<PDFViewer> render time in the ms range

Desktop (please complete the following information):

• OS: MacOS 10.14.3
• Browser Chrome 72.0.3626.119
• React-pdf version 16.8.5

[wyqydsyq]

I’ve also ran into this issue, I’m generating a PDF which has a dynamic number of pages, 10+ pages causes the browser to lock up entirely for 5+sec which is pretty terrible UX.

Is there no way to defer / promisify the render process so it does not block the main UI thread? I’ve tried using a pattern like this by rendering the Document into a ref which then gets passed to both BlobProvider and the PDFViewer:

  <BlobProvider
    document={pdfRef.current}
  >
    {({ url, loading }) =>
      loading ? (
        <LoadingStatus />
      ) : (
        <Box padding={2}>
          <PDFViewer
            style={{
              display: 'flex',
              width: '100%',
              minHeight: '500px',
              border: 'none',
            }}
          >
            {pdfRef.current}
          </PDFViewer>
          <WrapperLink
            href={url || ''}
            download={`${handle}-tables.pdf`}
            type="application/pdf"
          >
            <FullButton fullWidth endIcon={<DownloadIcon />}>
              Download
            </FullButton>
          </WrapperLink>
        </Box>
      )
    }
  </BlobProvider>

Which kind of seems to work in that I see a loading spinnter initially, but the whole window still locks up when it comes to rendering the PDF in PDFViewer, seemingly because react-pdf completely regenerates the PDF from the given VDOM passed to PDFViewer, instead of reusing the blob already generated by BlobProvider. I think PDFViewer needs to be able to accept pre-baked PDF blobs.

I feel like this could maybe be solved nicely by allowing PDFViewer to accept a blob from a loaded BlobProvider, rather than only accepting a Document VDOM as children

[modemmute]

Thanks for the quick reply @diegomura! Answers below:

Document taking out of the code

What do you mean by that. Rendering the <Document> straight away?

As a test I rendered the<Document> directly without wrapping it in the <PDFViewer>. It was raw, but rendered nearly instantly. Just so I understand the rendering process correctly, I’m guessing that the heavy lifting is being done by the <PDFViewer> and not when the <Document> is created?

Also of note, the browser seems to freeze as this delay is happening.

Yes. This is something we should definitely try to improve. #464 discusses the idea of using node/web workers for the rendering process, but I couldn’t find the way to make it work yet.

Is this a known issue then?

I’ll try your snippet by adding more rows and let you know what I can figure out

Many thanks!