# Using instance.loadDocument() inside useEffect to open a file

**URL:** <https://pdfjs.community/t/using-instance-loaddocument-inside-useeffect-to-open-a-file/318>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [October 6, 2020, 2:42pm UTC](https://pdfjs.community/t/using-instance-loaddocument-inside-useeffect-to-open-a-file/318 "2020-10-06T14:42:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![M.A](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@M.A](https://pdfjs.community/u/M.A)\
**Post date:** [October 6, 2020, 2:42pm UTC](https://pdfjs.community/t/using-instance-loaddocument-inside-useeffect-to-open-a-file/318/1 "2020-10-06T14:42:35Z")

</div>

**PDF.js Express Version**

**Detailed description of issue**  
{User can select a PDF to view in the webViewer from the dropdown. The flow is much like the example provided here: `https://pdfjs.express/documentation/samples/viewing`, but implemented in **ReactJs**. When another file is selected an error is thrown: Unhandled Rejection (Error): Two instances of WebViewer were created on the same HTML element. Please create a new element for each instance of WebViewer.  
What am I missing and how to fix it? }

**Expected behaviour**  
{ Selected document should be loaded into WebViewer without any errors. }

**Link to document**  
{Provide a link to the document in question if possible}

**Code snippet**  
{  
const viewer = useRef(null);

```
const [pdf, setPdf] = useState(undefined)

const docs = [

    {

        id: '0',

        text:'PDF-tron test',

        path: '/files/PDFTRON_about.pdf'

    },

    {

        id: '1',

        text:'ABY_PP_AR-5-0204',

        path: '/files/ABY_PP_AR-5-0204.pdf'

    },
]

let defaultFilePath = !!pdf ? docs.filter(x => {return x.id === pdf}) : docs[0]

useEffect(() => {

    WebViewer(

      {

        path: '/webviewer/lib',

        initialDoc: defaultFilePath.path,

      },

      viewer.current,

    ).then((instance) => {

        const file = docs.filter(x => {return x.id === pdf})

        

        if(file.length){

            console.log(file, file[0].path)

            instance.loadDocument(file[0].path);

        }

    });

}, [pdf] );

```

}

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [October 6, 2020, 2:58pm UTC](https://pdfjs.community/t/using-instance-loaddocument-inside-useeffect-to-open-a-file/318/2 "2020-10-06T14:58:52Z")

</div>

Hi,

Since your reference to `pdf` is changing, that useEffect hook is getting rerun which in turn is remounting WebViewer. You will have to pull that logic into it’s own useEffect.

```javascript
const [instance, setInstance] = useState(null)
useEffect(() => {
   WebViewer(...).then(instance => {
       setInstance(instance)
   })
}, [])

useEffect(() => {
     if(instance && pdf) {
         instance.loadDocument(pdf)
     }
}, [pdf, instance])

```

I recommend taking a look at the [React docs](https://reactjs.org/docs/hooks-reference.html#useeffect) and learning the ins and outs of the dependecy arrays!

Thanks,  
Logan

---

<div class="post-metadata">

**Author:** ![M.A](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@M.A](https://pdfjs.community/u/M.A)\
**Post date:** [October 7, 2020, 9:20am UTC](https://pdfjs.community/t/using-instance-loaddocument-inside-useeffect-to-open-a-file/318/3 "2020-10-07T09:20:56Z")

</div>

Thanks a lot! 🙏

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [October 7, 2020, 2:38pm UTC](https://pdfjs.community/t/using-instance-loaddocument-inside-useeffect-to-open-a-file/318/4 "2020-10-07T14:38:11Z")

</div>