> 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-hooks-error.md).

# React Hooks Error

World's #1 PDF SDK Library for Web, Mobile, Server, Desktop

If you are seeing the error below when creating custom components in WebViewer, it is probably due to the fact that you are using React Hooks in your component, or using a library that uses React Hooks.

{% code lineNumbers="true" %}

```
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
```

{% endcode %}

To fix this error, refactor your component to be a class based component rather than a functional component.

Here is an example of a functional component that uses React Hooks:

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

```js
const CustomButton = () => {
    useEffect(() => {
        console.log('test');
    }, []);

    return <button>Click me!</button>;
}

const newCustomElement = {
    type: 'customElement',
    dataElement: 'customElementButton',
    render: () => <CustomButton />
};

instance.UI.setHeaderItems(header => {
    header.push(newCustomElement);
});
```

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

Here is an example of a class based component that does the same thing:

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

```js
class CustomButton extends React.Component {
    componentDidMount() {
        console.log('test');
    }

    render() {
        return <button>Click me!</button>;
    }
}

const newCustomElement = {
    type: 'customElement',
    dataElement: 'customElementButton',
    render: () => <CustomButton />,
};

instance.UI.setHeaderItems(header => {
    header.push(newCustomElement);
});
```

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

### The reason hooks don't work for custom component

In WebViewer we use a different instance of React than the one you are using in your app. For hooks to work, the React instance where the hook was declared and where it was rendered must be the same. This is a limitation of React mentioned here: <https://react.dev/warnings/invalid-hook-call-warning#duplicate-react>


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.