title: react-pdf: use PDFDownloadLink asynchronously without blocking the rest of the application
body: <p>I'm using <code>PDFDownloadLink</code> from the <code>react-pdf</code> package to generate a PDF on the fly in my application and allow the user to download a report based on data being passed to the component that generates the PDF document. However, there are more than 400 pages that need to be rendered in this PDF, and this operation blocks the main thread for a few seconds. Is there any way to make this operation asynchronous, so the rest of the application will continue to function while the PDF is being generated? Also I would like to be able to cache the results, since the data being passed to the component can come from about 8 different arrays of data, which don't change very much, so switching between these arrays I would rather not to have to render the PDF all over again if the PDF for that given array has already been generated once before... I'm guessing the blob data needs to be stored somewhere, perhaps localStorage?</p>
  <pre class="lang-js prettyprint-override"><code>import { Page, Text, View, Document, StyleSheet, PDFDownloadLink } from '@react-pdf/renderer'
  const App = () =&gt; {
      const condition = &quot;firstCondition&quot;;
      const filteredRowData = rowData.filter(a =&gt; a.condition = condition);
      return (
              &lt;PDFDownloadLink
                  document={&lt;PDF_REPORT_Document rowData={filteredRowData} /&gt;}
                  fileName={&quot;PDF_REPORT.pdf&quot;}
                  style={{color:'white'}}
                  &gt;{({ blob, url, loading, error }) =&gt;
                      loading ? &quot;Report loading...&quot; : &quot;Report ready to download&quot;
                  }&lt;/PDFDownloadLink&gt;
      );
  }
  
  const PDF_REPORT_Document = (props) =&gt; {
      const { rowData } = props;
      const styles = StyleSheet.create({
          page: {
            flexDirection: 'column',
            backgroundColor: '#E4E4E4'
          },
          section: {
            margin: 10,
            padding: 10,
            flexGrow: 1
          }
      });
  
      return(
          &lt;Document&gt;
          {rowData.map((row,index) =&gt; 
              &lt;Page size=&quot;A4&quot; style={styles.page} key={index}&gt;
                  &lt;View style={styles.section}&gt;
                      &lt;Text&gt;Name: {row.FULLNAME}&lt;/Text&gt;
                  &lt;/View&gt;
              &lt;/Page&gt;
          )}
          &lt;/Document&gt;
      );
  }
  
  </code></pre>