React render-pdf open in new page onclick Slow issue

Question

I created one table that has some features every single row can generate a pdf and download by using render-pdf npm, I want to show when the user clicks the download button pdf preview on a new page, it working but the issues rendering in the method they pass all data row data as props on page load it affects the page it's time sometimes, and page crashed I tried on single click send particular data in props it not working fine, Please Helps any Idea it very full for me.

Thanks for help

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import { Container } from '@material-ui/core';
import { Text, Page, Document, BlobProvider } from '@react-pdf/renderer';

const data = [
  {
    id: 5,
    name: 'test',
    email: 'test@gmail.com'
  }
];

const MyDoc = ({ data }) => (
  <Document>
    <Page>
      <Text>{data.name}</Text>
    </Page>
  </Document>
);

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Container>
        <TableContainer component={Paper}>
          <Table className={classes.table} aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell>ID</TableCell>
                <TableCell> Name</TableCell>
                <TableCell>Email</TableCell>
                <TableCell>Pdf</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data.map(booking => (
                <TableRow key={booking.id}>
                  <TableCell>{booking.id}</TableCell>
                  <TableCell>{booking.name}</TableCell>
                  <TableCell>{booking.email}</TableCell>
                  <TableCell>
        <BlobProvider document={<MyDoc BookingData={booking} />}>
          {({ url }) => (
            <a href={url} target="_blank">
              Open in new tab
            </a>
          )}
        </BlobProvider>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Container>
    </div>
  );
}

Answer 1

I am not completely sure but I think the problem lies here: <BlobProvider document={<MyDoc BookingData={booking} />}> and const MyDoc = ({ data }) =>. You have to destructure BookingData in MyDoc not data. I think the data in MyDoc is conflicting with data array.

Try this and let me know if it worked:

Change

const MyDoc = ({ data }) => (
  <Document>
    <Page>
      <Text>{data.name}</Text>
    </Page>
  </Document>
);

to

const MyDoc = ({ pageData }) => (
  <Document>
    <Page>
      <Text>{pageData.name}</Text>
    </Page>
  </Document>
);

And

<BlobProvider document={<MyDoc BookingData={booking} />}>

to

<BlobProvider document={<MyDoc pageData={booking} />}>