Skip to content

Commit

Permalink
Added detach and unmount immediate to documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
jeffreylanters committed Nov 28, 2024
1 parent bc7a30b commit 14cf64b
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 2 deletions.
8 changes: 6 additions & 2 deletions documentation/docs/api/unload.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,12 @@ function unload(): Promise<void> | undefined;
The unload function is only available in Unity Builds created with Unity 2020.1 or later.
:::

:::warning
Normally it was possible to unmount the Unity Application and unmount the containing component right after the unload function was invoked, but due to a bug in newer Unity versions this is no longer possible when using a build made with Unity 2021.2 or later. It is still possible to unload the Unity Application, but the canvas has to be kept mounted until the promise is resolved. As of writing this, the issue has not been fixed, but it is possible to unmount the Unity Application manually by halting the navigation to the next page. A ticket has been opened, this is a known issue by the Unity team. More information can be found on the [issue on GitHub](https://github.com/jeffreylanters/react-unity-webgl/issues/250).
:::danger
In earlier versions of Unity, it was possible to unmount the Unity Application and its containing component immediately after invoking the unload function. However, due to a bug in newer Unity versions, this is no longer feasible when using builds made with Unity 2021.2 or later. While it is still possible to unload the Unity Application, the canvas must remain mounted until the associated promise is resolved.

As of this writing, the issue has not been resolved. However, it is possible to manually unmount the Unity Application by halting navigation to the next page. A ticket has been submitted, and the Unity team has acknowledged this as a known issue. For more details, refer to the [GitHub issue](https://github.com/jeffreylanters/react-unity-webgl/issues/250).

Alternatively, you can use the unsafe `detachAndUnloadImmediate` function to immediately unmount the Unity Application. However, this is not recommended unless you are an advanced user. For more information, refer to the [Unsafe Detach and Unload Immediate](/docs/api/unsafe-detach-unmount-immediate) documentation.
:::

When building a multi-page React Application, it is important to unload the Unity Application in order to completely unmount the component from the DOM to free up the memory taken by the Unity JavaScript heap, and without Unity throwing an error. Invoking the function will request the Unity Application to be unloaded from memory. The function will return a Promise that will be resolved when the Unity Application has been unloaded.
Expand Down
39 changes: 39 additions & 0 deletions documentation/docs/api/unsafe-detach-unmount-immediate.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# Unsafe Detach and Unload Immediate

:::warning
**It is not recommended to use this API unless you are an advanced user.** When using this API, you are responsible for managing the lifecycle of the Unity instance. If you are not careful, you may encounter memory leaks or other issues.
:::

The `UNSAFE__detachAndUnloadImmediate` function is used to detach and unload the Unity instance immediately. This function is useful when you want to unload the Unity instance immediately without waiting for the next garbage collection cycle.

## Type Definition

```ts title="Type Definition"
const UNSAFE__detachAndUnloadImmediate: () => Promise<void>;
```

## Example Usage

A basic implementation could look something like this. In the following example we are using the `useEffect` hook to call the `UNSAFE__detachAndUnloadImmediate` function when the component is unmounted.

```jsx {12-15} showLineNumbers title="App.jsx"
import React, { useEffect } from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

function App() {
const { unityProvider, UNSAFE__detachAndUnloadImmediate } = useUnityContext({
loaderUrl: "build/myunityapp.loader.js",
dataUrl: "build/myunityapp.data",
frameworkUrl: "build/myunityapp.framework.js",
codeUrl: "build/myunityapp.wasm",
});

useEffect(() => {
return () => {
UNSAFE__detachAndUnloadImmediate();
};
}, []);

return <Unity unityProvider={unityProvider} />;
}
```
5 changes: 5 additions & 0 deletions documentation/sidebars.json
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,11 @@
"id": "api/unsafe-unity-instance",
"label": "Access the Unity Instance"
},
{
"type": "doc",
"id": "api/unsafe-detach-unmount-immediate",
"label": "Detach and Unmount Immediate"
},
{
"type": "doc",
"id": "api/cache-control",
Expand Down

0 comments on commit 14cf64b

Please sign in to comment.