avoid fetching twice the pdf file

[78raoul78]

I'm using react-pdf to display a pdf file in the following way :

import React, { FC, useState } from 'react'
import { Document, Page, pdfjs } from 'react-pdf'

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`

export interface PDFProps {
  url: string
  width?: number
  onLoadError?: Document['props']['onLoadError']
  onSuccess?: () => void
}

export const PDF: FC<PDFProps> = ({ url, onSuccess }) => {
  const [pageNumbers, setPageNumbers] = useState<number[]>([])

  const onLoadSuccess: Document['props']['onLoadSuccess'] = ({ numPages }) => {
    if (numPages !== pageNumbers.length) {
      const pagesIndex = [...Array(numPages).keys()].map(
        (pageIndex) => pageIndex + 1,
      )

      setPageNumbers(pagesIndex)
      if (onSuccess) {
        onSuccess()
      }
    }
  }

  return (
    <Document
      options={{
        standardFontDataUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/standard_fonts`,
      }}
      file={{ url, withCredentials: true }}
      onLoadSuccess={onLoadSuccess}
    >
      {pageNumbers.map((pageNumber: number) => (
        <div key={pageNumber}>
          <Page pageNumber={pageNumber} />
        </div>
      ))}
    </Document>
  )
}

Almost everything is working well, the file is correctly opened and I can navigate through all the pages but I have the following issue : When the document loads for the first time, it does a network request to fetch the file, but then the onSuccess callback is called and this one affect the state (setPageNumbers) causing the document to rerender and so doing again the same network request to fetch the file, this could be seen in the network tab :

I've tried memoizing the file object following this discussion but this didn't change anything :

import React, { FC, useMemo, useState } from 'react'
import { Document, Page, pdfjs } from 'react-pdf'

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`

export interface PDFProps {
  url: string
  width?: number
  onLoadError?: Document['props']['onLoadError']
  onSuccess?: () => void
}

export const PDF: FC<PDFProps> = ({ url, onSuccess }) => {
  const [pageNumbers, setPageNumbers] = useState<number[]>([])

  const data = { url, withCredentials: true }

  const file = useMemo(() => data, [data])

  const onLoadSuccess: Document['props']['onLoadSuccess'] = ({ numPages }) => {
    if (numPages !== pageNumbers.length) {
      const pagesIndex = [...Array(numPages).keys()].map(
        (pageIndex) => pageIndex + 1,
      )

      setPageNumbers(pagesIndex)
      if (onSuccess) {
        onSuccess()
      }
    }
  }

  return (
    <Document
      options={{
        standardFontDataUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/standard_fonts`,
      }}
      file={file}
      onLoadSuccess={onLoadSuccess}
    >
      {pageNumbers.map((pageNumber: number) => (
        <div key={pageNumber}>
          <Page pageNumber={pageNumber} />
        </div>
      ))}
    </Document>
  )
}