How to prevent unity instance being reloading every time when changing pages. I want it to be stay same and not rerendered.

[EnderCelik0]

Hi i am working on a project that customize roulette wheels and i need to display 3d model of the wheel on some pages. But it needs to be stay the same and not rerender everytime when i change the page. I tried callback , useMemo and routing but nothing seems to work . Help would be appreciated thanks !

// This is where i display the 3d model. When i change the page it's unloading because when it doesn't it keeps adding model script to DOM everytime and causing browser to crash.

import { useEffect, useMemo } from "react";
import { useUnityHandler } from "@/context/UnityHandler";
import { Unity } from "react-unity-webgl";
import Loader from "../Loader";
import { useAppContext } from "@/context/AppContext";

function UnityBuild() {
const {
loadingProgression,
unityProvider,
isLoaded,
unload,
} = useUnityHandler();
const { page } = useAppContext();

console.log(isLoaded, loadingProgression * 100);

useEffect(() => {
unload();
}, [page]);

const renderedComponent = useMemo(() => {
const loadingPercentage = Math.round(loadingProgression * 100);

return (
  <div className="h-full w-full">
    {!isLoaded && (
      <div className="flex h-full w-full items-center justify-center gap-2">
        <Loader />
        <p>{loadingPercentage}%</p>
      </div>
    )}
    <Unity
      id="canvas"
      unityProvider={unityProvider}
      className="h-full w-full"
    />
  </div>
);

}, [loadingProgression, isLoaded, unityProvider]);

return renderedComponent;
}

export default UnityBuild;

// THIS IS MY UNITY CONTEXT

import {
createContext,
useCallback,
useContext,
ReactNode,
useMemo,
} from "react";
import { useUnityContext } from "react-unity-webgl";

interface UnityHandlerProps {
unityProvider: any;
takeScreenshot: () => void;
sendMessage: (
gameObject: string,
methodName: string,
parameter?: string | number,
) => void;
isLoaded: boolean;
loadingProgression: number;
ChangeAdminPage: (pageName: string) => void;
// Diğer gerekli props ve metodlar
unload: () => void;
}

const UnityHandler = createContext<UnityHandlerProps | null>(null);

interface UnityHandlerProviderProps {
children: ReactNode;
}

export function UnityHandlerProvider({ children }: UnityHandlerProviderProps) {
const unityContext = useMemo(
() => ({
dataUrl: "/unity/CMGH_React.data",
codeUrl: "/unity/CMGH_React.wasm",
loaderUrl: "/unity/CMGH_React.loader.js",
frameworkUrl: "/unity/CMGH_React.framework.js",
webglContextAttributes: {
preserveDrawingBuffer: true,
}
}),
[],
);

const {
unityProvider,
takeScreenshot,
sendMessage,
isLoaded,
loadingProgression,
unload,
} = useUnityContext(unityContext);

const ChangeAdminPage = useCallback(
(pageName: string) => {
sendMessage("ConfigurationManager", "ChangeAdminPage", pageName);
},
[sendMessage],
);

const contextValue = useMemo(
() => ({
unityProvider,
takeScreenshot,
sendMessage,
isLoaded,
loadingProgression,
ChangeAdminPage,
unload,
}),
[
unityProvider,
takeScreenshot,
sendMessage,
isLoaded,
loadingProgression,
ChangeAdminPage,
unload,
],
);

return (
<UnityHandler.Provider value={contextValue}>
{children}
</UnityHandler.Provider>
);
}

export function useUnityHandler(): UnityHandlerProps {
const context = useContext(UnityHandler);
if (!context) {
throw new Error(
"useUnityHandler must be used within a UnityHandlerProvider",
);
}
return context;
}

// APP.TSX

import Sidebar from "./components/SideBar";
import EditProduct from "./pages/Features.tsx";
import EditRules from "./pages/EditRules";
import Settings from "./pages/Settings";
import { Toaster } from "sonner";
import EditMaterials from "./pages/EditMaterials";
import { useAppContext } from "./context/AppContext.tsx";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import Products from "./pages/Products.tsx";
import Cameras from "./pages/Cameras.tsx";
import POC from "./pages/POC.tsx";

const queryClient = new QueryClient();

const App = () => {
const { page } = useAppContext();

const renderSelectedComponent = () => {
switch (page) {
case "products":
return ;

  case "features":
    return <EditProduct />;

  case "rules":
    return <EditRules />;

  case "materials":
    return <EditMaterials />;

  case "settings":
    return <Settings />;

  case "cameras":
    return <Cameras />;

  case "poc":
    return <POC />;

  default:
    return null;
}

};

return (

{renderSelectedComponent()}

);
};

export default App;

/// PRODUCT PAGE

`import ProductList from "@/components/Products/ProductList";
import ProductModelProperties from "@/components/Products/ProductModelProperties";
import ProductModelView from "@/components/Products/ProductModelView";
import ModelView from "@/components/Unity/ModelView";
import Wrapper from "@/components/Wrapper";

export default function Products() {
return ( // <Wrapper > <div className="grid grid-cols-12 gap-4 p-2"> <ProductList /> <ProductModelProperties /> <ModelView /> </div> // </Wrapper> ); }

/// CAMERAS PAGE

`import CameraList from "@/components/Cameras/CameraList";
import CameraProperties from "@/components/Cameras/CameraProperties/CameraProperties";
import CameraView from "@/components/Cameras/CameraView";
import ModelView from "@/components/Unity/ModelView";

export default function Cameras() {
return ( <div className="grid grid-cols-12 gap-4 p-2"> <CameraList /> <CameraProperties /> <ModelView /> </div> ); }

// MODEL VIEWS INCLUDES UNITYBUILD COMPONENT

`import UnityBuild from "../Unity/UnityBuild";

export default function ModelView() {
return ( <div className="col-span-6 flex h-full max-w-full flex-col rounded-md border-2 border-[#c3c3c3] p-2"> <h1 className="whitespace-nowrap text-xl font-semibold">3D View</h1> <div className="flex h-full w-full items-center justify-center rounded-md border-2 border-black/20"> <UnityBuild /> </div> </div> ); }