diff --git a/packages/renderer/src/dom/usePDF.js b/packages/renderer/src/dom/usePDF.js index e78854562..d1e0bc193 100644 --- a/packages/renderer/src/dom/usePDF.js +++ b/packages/renderer/src/dom/usePDF.js @@ -5,8 +5,19 @@ import { useState, useRef, useEffect, useCallback } from 'react'; import { pdf } from '../index'; +const useCommittedRef = value => { + const ref = useRef(); + + useEffect(() => { + ref.current = value; + }); + + return ref; +}; + export const usePDF = ({ document } = {}) => { const pdfInstance = useRef(null); + const committedDocument = useCommittedRef(document); const [state, setState] = useState({ url: null, @@ -65,8 +76,15 @@ export const usePDF = ({ document } = {}) => { }; }, [state.url]); - const update = useCallback(newDoc => { - pdfInstance.current.updateContainer(newDoc); + // make update function stable + const update = useCallback((...args) => { + if (args.length === 0) { + // TODO: add warning that no args update would be removed in next versions + pdfInstance.current.updateContainer(committedDocument.current); + } else { + const [newDoc] = args; + pdfInstance.current.updateContainer(newDoc); + } }, []); return [state, update]; diff --git a/packages/renderer/tests/usePDF.test.js b/packages/renderer/tests/usePDF.test.js index 47da78ea8..85757c34c 100644 --- a/packages/renderer/tests/usePDF.test.js +++ b/packages/renderer/tests/usePDF.test.js @@ -3,6 +3,7 @@ */ /* eslint-disable import/no-extraneous-dependencies */ +import { useEffect, useState } from 'react'; import { renderHook, waitFor, act } from '@testing-library/react'; import { usePDF, Document, Page, Text } from '../src/dom'; @@ -57,3 +58,27 @@ it('updates document', async () => { expect(result.current[0].blob.size).not.toEqual(pdfSize); }); + +it('backward compatible with previous hook', async () => { + const { result } = renderHook(() => { + const [document, setDoc] = useState(() => ); + const [instance, update] = usePDF({ document }); + + useEffect(update, [document]); + + return [ + instance, + () => setDoc(), + ]; + }); + + await waitFor(() => expect(result.current[0].loading).toBeFalsy()); + + const pdfSize = result.current[0].blob.size; + + act(() => result.current[1]()); + + await waitFor(() => expect(result.current[0].loading).toBeFalsy()); + + expect(result.current[0].blob.size).not.toEqual(pdfSize); +});