title: React pdf downloads blank
body: <p>I am using React hooks and the react-pdf from <a href="https://react-pdf.org/" rel="noreferrer">react-pdf</a></p>
  
  <p>I tried 3 different React pdf converters, and this is the one that has been working best so far. It still isn't working great tho - I can't see how to make it not either run out of memory or produce blank pdfs.</p>
  
  <p>I have a component that produces the pdf:</p>
  
  <pre><code>import React from 'react';
  import { Page, Text, View, Document, StyleSheet, Font } from '@react-pdf/renderer';
  
  Font.register({
      family: 'Roboto',
      src: 'https://fonts.googleapis.com/css?family=Roboto+Mono:100i,300,300i,400,400i,500,500i,700,700i&amp;display=swap'
    });
  
  // Create styles
  const styles = StyleSheet.create({
    page: { 
      backgroundColor: '#F5F8FA',
      display: 'flex',
      // flexDirection: 'column',
      // alignItems: 'flex-start',
      marginTop: 40,
      marginLeft: 20,
      marginRight: 20,
      width: 555
    },
    section: {
      margin: 50,
      padding: 50,
    },
    reportHeader: {
      marginLeft: 0,
      fontStyle: 'normal',
      fontWeight: 'bold',
      fontSize: 24,
      lineHeight: 43,
      color: '#BF802F',
    },
    reportIntro: {
      width: 555,
      height: 132,
      paddingLeft: 0,
      paddingTop: 10,
      paddingBottom: 30,
      fontStyle: 'normal',
      fontWeight: 'normal',
      fontSize: 16,
      lineHeight: 22,
      color: '#0C3957',
    }
  });
  
  // Create Document Component
  export const ReportPDF = ({ name, adviser }) =&gt; {
  
      return (
    &lt;Document &gt; 
      &lt;Page style={styles.page} wrap={false}&gt;
        &lt;View style={{ textAlign: 'flex-start', marginBottom: 20 }}&gt;
          &lt;Text style={styles.reportHeader}&gt;Your goals report&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/Page&gt;
    &lt;/Document&gt;
      )
  }
  </code></pre>
  
  <p>And I have another compoonent that has a button to download the pdf file. I found someone else who claimed useMemo helps this situation, but I can't make it work this way either:</p>
  
  <pre><code>const stuff = useMemo(
          () =&gt; (
            &lt;PDFDownloadLink document={&lt;ReportPDF /&gt;} fileName="somename.pdf"&gt;
              {({ blob, url, loading, error }) =&gt; (loading ? 'Loading document...' : 'Download now!')}
            &lt;/PDFDownloadLink&gt;
          ), [])
  </code></pre>
  
  <p>I then have {stuff} inside a div in the JSX.</p>
  
  <p>When I click the download link I get a blank PDF. What is happening?</p>
  
  <p>If I don't set wrap={false} it runs out of memory?</p>