Skip to main content
A React integration needs a released client package and session contract. A verified public Threetone React SDK, package version, and installation recipe are not established here. You can prepare the application boundary and interface states now.

Separate server and browser responsibilities

For supported server resource reads, use the TypeScript example. Keep that workspace credential out of client components, public environment variables, serialized props, and browser requests.

Prepare the React lifecycle

1

Choose a session owner

Decide which component or application service owns an active session. Keep rerenders and route changes from accidentally creating a second connection. Begin an interaction through a deliberate user action with a clear pending state.
2

Pair subscriptions with cleanup

Once the client contract exists, attach its event subscriptions to the owning lifecycle and remove them during cleanup. React runs effect cleanup before a changed setup and on unmount; development Strict Mode also tests an extra setup-and-cleanup cycle. See React’s effect reference.
3

Represent failures explicitly

Design idle, connecting, active, interrupted, and ended states. Prevent repeated start clicks from creating duplicate work. Show permission denial and expired access distinctly from a normal end.

Release checks

When an official SDK is available, verify the package origin, supported React versions, event types, session access, and cleanup API. Test route transitions, development remounts, network loss, and session end against the real runtime. Do not suppress cleanup or disable development checks to hide duplicate connections. Use React components to prepare presentation and the widget guide if a managed embed is a better fit.

Frequently asked questions

Private application components do not establish a supported public package or transport. Wait for the documented release and installation contract.
No. That example uses a workspace API key and belongs on a trusted server. Browser session access requires its own released mechanism.