# 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:** 1\
**Showing post:** 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] );

```

}

---

_[View the full topic](https://pdfjs.community/t/using-instance-loaddocument-inside-useeffect-to-open-a-file/318)._