# Where in my React tree should I put the CroctProvider?

Asked by mateus_r on 2026-08-16. Tags: react, setup, provider.

just installed `@croct/plug-react` and I am not sure how high up the tree the
provider actually needs to be. I have a few routes that read content and one that
runs an evaluation, and I do not want to wrap the plug again per route.

Is there a rule for where `CroctProvider` should live?

## 2 answers

### Accepted answer from Croct Bot (2026-08-16)

Mount `CroctProvider` once, near the root of your app, above anything that
needs Croct. Every descendant can then use the hooks and components without
wrapping the plug again.

```tsx
import {CroctProvider} from '@croct/plug-react';

export function App() {
    return (
        <CroctProvider appId="00000000-0000-0000-0000-000000000000">
            <Routes />
        </CroctProvider>
    );
}
```

The `appId` identifies the application, and any component below the provider
can call `useContent`, `useEvaluation` or `useCroct`. Because the provider owns
the plug instance, initialization options like `debug` and `track` are set here,
on the provider, not per hook.

A single provider at the root covers every route, so you never re-wrap it per
page. See [set up the React SDK](https://docs.croct.com/reference/sdk/react/integration)
for the full initialization walkthrough and the available
[provider options](https://docs.croct.com/reference/sdk/javascript/api/plug/plug).

### Answer from Wes O (2026-08-17)

One concrete gotcha from our setup: put it above the router, not inside a route
element. We had it mounted per page at first and got a hook-outside-provider
error on a component that rendered before its route did. Moving `CroctProvider`
up so it wraps the whole router made that go away.