# React lifecycle — Five SDK

Integrate Five SDK into React with a stable host, lazy imports, cancellation, resize observation, and complete cleanup.

Canonical: https://developer.realsee.ai/docs/five-sdk/react-lifecycle
Source: https://developer.realsee.ai/docs/five-sdk/react-lifecycle.md
Language: en

[Download examples](https://developer.realsee.ai/starters/react-five/1.3.0/starter.zip)

The starter uses `createRoot`. Its viewer owns one SDK instance for the currently selected scene.

## Start with the working component

[Run the starter](https://developer.realsee.ai/docs/five-sdk/quickstart), then open `src/Viewer.tsx`. Use its lifecycle when embedding the scene in an existing React app. You do not need a separate HOC or framework-specific renderer to use the core SDK.

The [Quickstart shows the exact component source](https://developer.realsee.ai/docs/five-sdk/quickstart#read-the-working-viewer). The smaller [mount helper](https://developer.realsee.ai/docs/five-sdk/load-a-scene#mount-and-dispose) is useful when the host belongs to another UI framework.

## Preserve these boundaries

1. Create the SDK inside an effect after its host exists. Keep a nonzero host height.
2. Import the WebGL runtime in the browser. Avoid instantiating it during SSR.
3. Resolve the selected Work and parse it before loading. Team credentials stay in the local server.
4. Ignore obsolete load completions after selection changes or unmount.
5. Observe the actual container size and call `refresh` after layout changes.
6. On cleanup, abort local requests, remove listeners, disconnect the observer, dispose the SDK, and remove its layer.

React development Strict Mode may run effect setup and cleanup more than once. The implementation must leave a fresh host ready for another mount; a retained disposed instance or an old canvas is a bug.

## Do not copy a live state object

The SDK's state includes a Three.js vector. Use the [saved-view helper](https://developer.realsee.ai/docs/five-sdk/camera-and-modes#save-and-restore-a-view) when serializing a view. An instance ref belongs to its current effect, not to another component after that effect has disposed it.

## Check the result

Mount, unmount and mount again. Change scenes while the previous load is pending. Resize the parent without resizing the window. Each operation should leave one current canvas and no obsolete callbacks updating the new scene.

For extension SDKs, follow their published peer dependencies. Continue with [Production checklist](https://developer.realsee.ai/docs/five-sdk/production).