Skip to main content
Realsee
Documentation
  1. Docs
  2. Five SDK
  3. React lifecycle

React lifecycle

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

View Markdown
Download examples
On this page

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

Start with the working component

Run the starter, 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. The smaller mount helper 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 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.