How are re-renders treated in react-pdf? Using and updating contexts seems to work, but only once.

[michael-wegener-metro]

Hello everyone,

I might have a rather uncommon issue, but maybe someone has faced something similar, or maybe someone understands the rendering pipeline a bit better than I do and can tell me what's going on here.

Using contexts with changing values while generating PDFs might not sound like the best idea, but I wanted to see how react-pdf handles it anyway. It worked surprisingly good, but as I later discovered, it only works once, which is something I can't quite figure out why.

I created a small-ish example to explain what I'm trying to do:

import { Document, Page, renderToBuffer, Text, View } from '@react-pdf/renderer';
import { writeFileSync } from 'fs';
import React, { createContext, PropsWithChildren, useState } from 'react';

// Context
interface NoteContextType {
  notes: string[];
  addNote: (footnote: string) => void;
}
const NoteContext = createContext<NoteContextType>({
  notes: [],
  addNote: () => {},
});
function NoteContextProvider(props: PropsWithChildren<{}>) {
  const [notes, setNotes] = useState<string[]>([]);

  const footnoteContext: NoteContextType = React.useMemo(
    () => ({
      notes,
      addNote: (note: string) => setNotes((f) => [...f, note]),
    }),
    [notes, setNotes],
  );

  return <NoteContext.Provider value={footnoteContext}>{props.children}</NoteContext.Provider>;
}

// Components
function Note(props: { note: string; children: string }) {
  const context = React.useContext(NoteContext);
  React.useEffect(() => {
    context.addNote(props.note);
    console.log('Adding note', props.note);
  }, []);
  return (
    <Text>
      {props.children}
      <Text style={{ verticalAlign: 'super', fontSize: 5.5, fontWeight: 'normal' }}>
        {(context.notes.findIndex((s) => s === props.note) + 1).toString()}
      </Text>
    </Text>
  );
}

function NotesList() {
  const { notes } = React.useContext(NoteContext);
  console.log('Rendering notes list', notes);
  return notes.length > 0 ? (
    <Text style={{ fontSize: 8, marginTop: 10 }}>
      {notes.map((note, index) => (
        <Text key={index} style={{ marginTop: 2 }}>
          {index + 1}. {note}
          {'\n'}
        </Text>
      ))}
    </Text>
  ) : null;
}

function MyPage({ filename }: { filename?: string }) {
  console.log('Rendering page', filename);
  return (
    <Page size={'A4'}>
      <NoteContextProvider key={Math.random()}>
        <View style={{ display: 'flex', justifyContent: 'space-between', height: '100%' }}>
          <Text>
            This is a demo document with{' '}
            <Note note="A footnote is an additional piece of information printed at the bottom of a page.">
              footnotes
            </Note>
            .
          </Text>
          <Text>
            Lorem ipsum dolor sit amet, consectetur <Note note="Lorem ipsum dolor sit amet">adipiscing</Note> elit.
            Mauris quis convallis felis. Praesent elementum venenatis augue, nec fermentum massa varius iaculis.
          </Text>

          <NotesList />
        </View>
      </NoteContextProvider>
    </Page>
  );
}

// Document
async function createDemoPdf(filename: string) {
  const document = (
    <Document>
      <MyPage filename={filename} />
    </Document>
  );

  console.log('Rendering document', filename);
  const buffer = await renderToBuffer(document);

  console.log('Writing file', filename);
  writeFileSync(filename, buffer);
}

async function createDemoPdfs() {
  await createDemoPdf('demo1.pdf');
  console.log();
  await createDemoPdf('demo2.pdf');
}

createDemoPdfs();

Now, when I run this example with ts-node generateDemoPdfs.tsx, the logs look exactly like I would expect them to look:

Rendering document demo1.pdf
Rendering page demo1.pdf
Rendering notes list []
Adding note A footnote is an additional piece of information printed at the bottom of a page.
Adding note Lorem ipsum dolor sit amet
Rendering notes list [
  'A footnote is an additional piece of information printed at the bottom of a page.',
  'Lorem ipsum dolor sit amet'
]
Writing file demo1.pdf

Rendering document demo2.pdf
Rendering page demo2.pdf
Rendering notes list []
Adding note A footnote is an additional piece of information printed at the bottom of a page.
Adding note Lorem ipsum dolor sit amet
Rendering notes list [
  'A footnote is an additional piece of information printed at the bottom of a page.',
  'Lorem ipsum dolor sit amet'
]
Writing file demo2.pdf

The logs for both documents look exactly the same. It first renders the note list with an empty array, then two notes are added, and since the context changes, the note list is rendered for a second time with the notes that were added.

If the Footnotes were missing from both documents, I actually wouldn't be surprised, but the first document actually looks completely fine and only in the second document the footnotes are missing. I can render even more documents and the first one will always work fine and everything that comes after that is missing all the re-renders.

So basically the first renderToBuffer(document) considers both render cycles and only only then writes the document, while the second renderToBuffer(document) only considers the first render cycle, so any re-renders that might be happening are disregarded.

Did anyone every run into an issue with re-renders while generating PDFs? I guess re-renders are not a very common thing, so most people probably don't run into this issue, but maybe I'm lucky and somebody can help me with this.