Fix race condition: Render last requested page

[djsamseng]

Test Plan: Copy into local project and quickly change pages. Ensure that the correct page gets rendered. Run the demo app with the following changes to observe the issue and test the fix

  useEffect(() => {
    for (let i = 0; i < 8; i++) {
      const pgNum = (i % 2) + 8;

      setTimeout(() => {
        setPage(pgNum);
      }, i * 100);
    }
  }, []);

  const { pdfDocument } = usePdf({
    file: 'plan.pdf',
    page,
    canvasRef,
    scale: 1.5,
    onPageRenderSuccess: page => {
      console.log("Render success:", page.pageNumber);
    }
  });
  console.log("Set page:", page);

Without these changes:

Set page: 8
Set page: 9
Set page: 8
Set page: 9
Set page: 8
Set page: 9
Set page: 8
Set page: 9
Render success: 8

With these changes:

Set page: 8
Set page: 9
Set page: 8
Set page: 9
Set page: 8
Set page: 9
Set page: 8
Set page: 9
Render success: 9

Note that I did have to use a pdf with pages that required a lot of rendering as well as a high scale in order to reproduce the issue

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-pdf-js	❌ Failed (Inspect)			Jan 16, 2024 9:39pm

[mikecousins]

Looks great, thanks!