# React applications

Canonical page: https://docs.ovok.com/web-sdk/core/guides/react-applications

Use the package root for the `Ovok` client and `@ovok/core/next/react` for the provider and hooks. Keep the provider and hook consumers in the client component tree.

```tsx
'use client';

import { useState, type PropsWithChildren } from 'react';
import { Ovok } from '@ovok/core';
import { OvokProvider, useSession } from '@ovok/core/next/react';

function SessionStatus() {
  const { data, loading, error, refetch } = useSession();

  if (loading) return <p>Loading session…</p>;
  if (error) return <button onClick={refetch}>Retry</button>;

  return <p>{data?.profile.reference ?? 'No active session'}</p>;
}

export function AppProviders({ children }: PropsWithChildren) {
  const [client] = useState(() => new Ovok({
    baseUrl: 'https://api.sandbox.ovok.com',
    tenantCode: 'your-tenant',
  }));

  return <OvokProvider client={client}>{children}</OvokProvider>;
}
```

`useSession()` returns `data`, `loading`, `isRefreshing`, `isStale`, `error`, and `refetch`. `useSearch()` and `useResource()` read FHIR resources. `useOvokQuery()` and `useOvokMutation()` provide request and mutation state for other workflows.

Keep user-specific server clients request-scoped. Never send a machine `clientSecret` to browser code. The API remains responsible for authentication, project membership, and authorization.

See [React integration](/web-sdk/core/react) and the [complete API reference](/web-sdk/core/reference/) for the available React surface.