> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/faq/react-strict-mode.md).

# How do I use WebViewer with React strict mode?

When [React Strict Mode](https://react.dev/reference/react/StrictMode) is enabled, components will re-render an extra time and useEffect hooks will also be re-run. This is to help you find bugs and memory leaks caused by impure rendering or missing effect cleanups.

When initializing WebViewer in a `useEffect`, strict mode will cause WebViewer to mount *twice* which may cause unexpected behaviour.

There are a few options to work around this undesired behaviour.

## 1. Prevent remounting

The easiest way to prevent this behaviour is to add a check to your useEffect that prevents WebViewer from reinitializing. The easiest way to do so is by setting a flag after the initial render and then exiting the useEffect early if it is set.

{% hint style="info" %}
This is the recommended approach
{% endhint %}

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
import WebViewer from "@pdftron/webviewer";
import { useEffect, useRef } from "react";

export default function WebViewerComponent() {

  const ref = useRef(null);
  const hasMounted = useRef(false);

  useEffect(() => {
    if (hasMounted.current) {
      return;
    }
    hasMounted.current = true;

    WebViewer({
      ...
    }, ref.current)
      .then((instance) => {

      })
  }, [])

  return (
    <div ref={ref} />
  )
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

## 2. Disable strict mode

Another option is to remove strict mode all together. Doing so will stop WebViewer from mounting twice, but you will lose the debugging benefits of having it enabled.

To remove strict mode, delete the `<StrictMode>` element that wraps your application.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/get-started/faq/react-strict-mode.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.