I would like to see a better way to handle the options prop in the <Document /> component

[dan753722]

Before you start - checklist

• I understand that React-PDF does not aim to be a fully-fledged PDF viewer and is only a tool to make one
• I have checked if this feature request is not already reported

Description

Hi there, I've recently started using this react-pdf library.
Awesome work mate.

I've noticed that in your readme when configuring the react-pdf <Document />

https://github.com/wojtekmaj/react-pdf#setting-up-react-pdf-1

options is always passed in as a new object.

It's great as getting started guide, and it is great for developers who wants to just render a single pdf page and call it done.

However, I fear this example is also misleading and trigger a bug that is super hidden as soon as developers want to do more interactive things like zoom and text highlight search.

You see, every time, state is updated, options object is passed in to the Document component. It triggers <Document/> to reload.

my current workaroad is:

const [scale, setScale] = useState(scale); 
const documentOptions = useRef({httpHeaders: {},...});
...
return (<Document options={documentOptions.current}><Page scale={scale}/></Document>);

Proposed solution

use useState to manage incoming prop options in the <Document /> component.
useState won't cause Document to rerender if the value is identical.

Alternatives

update the readme on the how to setup examples, and warn consumers that consumers should pass options object in as ref.

Additional information

No response

[wojtekmaj]

You're totally right, that's badly documented. Will update.

In the meantime, two suggestions:

• Define options object outside of React component
• If you have to define it inside, e.g. it depends on some props, use useMemo.