# React+babylonjs: WebGL context lost **URL:** \ **Category:** Bugs\ **Created:** [March 20, 2024, 7:09am UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898 "2024-03-20T07:09:43Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![ZoeLeee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zoeleee/32/20340_2.png) [@ZoeLeee](https://forum.babylonjs.com/u/ZoeLeee)\ **Post date:** [March 20, 2024, 7:09am UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/1 "2024-03-20T07:09:43Z")
[codesandbox](https://codesandbox.io/p/sandbox/babylonjs-react-l336lq?file=%2Fsrc%2FApp.tsx%3A27%2C32&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cltzf1g6r0006356k9m5jxaog%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cltzf1g6r0002356kdajv1mvy%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cltzf1g6r0003356kytoru63t%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cltzf1g6r0005356k9z63rsoe%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cltzf1g6r0002356kdajv1mvy%2522%253A%257B%2522id%2522%253A%2522cltzf1g6r0002356kdajv1mvy%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltzf7s1g0002356khuredinr%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A27%252C%2522startColumn%2522%253A32%252C%2522endLineNumber%2522%253A27%252C%2522endColumn%2522%253A32%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cltzf7s1g0002356khuredinr%2522%257D%252C%2522cltzf1g6r0005356k9z63rsoe%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltzf1g6r0004356krpr04n74%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cltzf1g6r0005356k9z63rsoe%2522%252C%2522activeTabId%2522%253A%2522cltzf1g6r0004356krpr04n74%2522%257D%252C%2522cltzf1g6r0003356kytoru63t%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cltzf1g6r0003356kytoru63t%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/9/89128b7175f7ca23fb78513af6820a2b1c247912.png) ![123](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/4/14f6008bff9942e92207b9aefb7dcf46905a28a9.gif) Calling engine.dispose() within React’s useEffect doesn’t seem to properly destroy the context. ---
**Author:** ![feuerstein](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/feuerstein/32/26127_2.png) [@feuerstein](https://forum.babylonjs.com/u/feuerstein)\ **Post date:** [March 20, 2024, 7:17am UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/2 "2024-03-20T07:17:31Z")
@ZoeLeee the sandbox link is broken. You’d wanna keep a reference to the engine on the side (maybe in state or a singleton) and call it later. Best way is to rely on react as an event trigger system. ---
**Author:** ![ZoeLeee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zoeleee/32/20340_2.png) [@ZoeLeee](https://forum.babylonjs.com/u/ZoeLeee)\ **Post date:** [March 20, 2024, 7:21am UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/3 "2024-03-20T07:21:27Z")
I’ve restored the link address. I wish for the Babylon engine to be properly disposed of upon the React component’s destruction. ---
**Author:** ![feuerstein](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/feuerstein/32/26127_2.png) [@feuerstein](https://forum.babylonjs.com/u/feuerstein)\ **Post date:** [March 20, 2024, 7:26am UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/4 "2024-03-20T07:26:55Z")
seems to work fine on the sandbox, what’s the issue ? ---
**Author:** ![ZoeLeee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zoeleee/32/20340_2.png) [@ZoeLeee](https://forum.babylonjs.com/u/ZoeLeee)\ **Post date:** [March 20, 2024, 7:41am UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/5 "2024-03-20T07:41:58Z")
After roughly 27 consecutive clicks, warnings about excessive context may appear. Please refer to the GIF I’ve uploaded for reference. ---
**Author:** ![ZoeLeee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zoeleee/32/20340_2.png) [@ZoeLeee](https://forum.babylonjs.com/u/ZoeLeee)\ **Post date:** [March 20, 2024, 8:48am UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/6 "2024-03-20T08:48:09Z")
I’ve temporarily resolved the issue this way. ```auto engine.dispose() engine._gl.getExtension("WEBGL_lose_context")?.loseContext(); ``` ---
**Author:** ![denysp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/denysp/32/18372_2.png) [@denysp](https://forum.babylonjs.com/u/denysp)\ **Post date:** [March 20, 2024, 2:18pm UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/7 "2024-03-20T14:18:38Z")
It looks like your component is rerendered, and it calls the engine.dispose() each time when unmounting. I’d suggest hoisting the engine to a context. This means that if you re-mount the Canvas component, a reference to Engine will still exist. ---
**Author:** ![ZoeLeee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zoeleee/32/20340_2.png) [@ZoeLeee](https://forum.babylonjs.com/u/ZoeLeee)\ **Post date:** [March 21, 2024, 1:27am UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/8 "2024-03-21T01:27:37Z")
Even if I place the engine within the context, I still need to initialize the engine within the component where the canvas resides. When this component is unmounted, I still need to call `engine.dispose()`, which I believe might lead to the same issue. ---
**Author:** ![denysp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/denysp/32/18372_2.png) [@denysp](https://forum.babylonjs.com/u/denysp)\ **Post date:** [March 21, 2024, 8:05am UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/9 "2024-03-21T08:05:02Z")
No no, it is not necessary. That is the thing, you don’t need to dispose of the engine every time as it is initialized in the context. I’ll try to find some time to make a prototype for you. ---
**Author:** ![denysp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/denysp/32/18372_2.png) [@denysp](https://forum.babylonjs.com/u/denysp)\ **Post date:** [March 21, 2024, 1:12pm UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/10 "2024-03-21T13:12:44Z")
I did have some time to make this working proto for you, but it is a little messy. Sorry for that (-: [Link to codesandbox](https://codesandbox.io/p/sandbox/babylonjs-engine-in-context-5tys7t?file=%2Fsrc%2FApp.js%3A18%2C2&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clu18hrcm00073b6n45c1i875%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clu18hrcm00033b6nowgmo1h9%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clu18hrcm00043b6n9sr3fbyh%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clu18hrcm00063b6n9bmx0qpd%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clu18hrcm00033b6nowgmo1h9%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clu18hrcm00023b6nb1t2z20l%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A18%252C%2522startColumn%2522%253A2%252C%2522endLineNumber%2522%253A18%252C%2522endColumn%2522%253A2%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clu18hrcm00033b6nowgmo1h9%2522%252C%2522activeTabId%2522%253A%2522clu18hrcm00023b6nb1t2z20l%2522%257D%252C%2522clu18hrcm00063b6n9bmx0qpd%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clu18hrcm00053b6nlznvn629%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clu18hrcm00063b6n9bmx0qpd%2522%252C%2522activeTabId%2522%253A%2522clu18hrcm00053b6nlznvn629%2522%257D%252C%2522clu18hrcm00043b6n9sr3fbyh%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clu18hrcm00043b6n9sr3fbyh%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D) It has a context that refers to an engine. Your App, which initializes Engine once and put it into the context. The canvas component takes the reference to the engine and uses its rendering canvas so you can mount it to your components. And, only canvas remounting happens when the button is clicked, but the engine is not disposed. You can, of course, adjust it, and probably you want to resize the engine after mounting, but it is already a part of your business logic. ---
**Author:** ![ZoeLeee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zoeleee/32/20340_2.png) [@ZoeLeee](https://forum.babylonjs.com/u/ZoeLeee)\ **Post date:** [March 22, 2024, 1:34am UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/11 "2024-03-22T01:34:19Z")
You’re amazing! Thank you for taking the time to create this demo. Now, there’s no need to dispose of the engine frequently. Wishing you a joyful life ahead! ---
**Author:** ![dennemark](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dennemark/32/10745_2.png) [@dennemark](https://forum.babylonjs.com/u/dennemark)\ **Post date:** [March 28, 2024, 7:33am UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/12 "2024-03-28T07:33:49Z")
@brianzinn I think this also applies to react-babylonjs And calling loseContext seems to help. ---
**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\ **Post date:** [March 28, 2024, 8:39pm UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/13 "2024-03-28T20:39:39Z")
thanks @dennemark for sharing - definitely looks like a good addition. i have an RTX 3060 video card, but I think this happens more on lower-end devices/hardware. I wonder if that is something upstream that should be done - like an opt-out to not call automatically onDispose()? ---
**Author:** ![dennemark](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dennemark/32/10745_2.png) [@dennemark](https://forum.babylonjs.com/u/dennemark)\ **Post date:** [April 2, 2024, 6:51am UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/14 "2024-04-02T06:51:06Z")
Yes @brianzinn the issue mainly appears on low-end devices. But i am not sure if this issue only appears when using react. It seems like react is not properly cleaning up the canvas? But what you are proposing would be close to @denysp solution to keep the engine running even though the component is disposed, right? I was rather thinking of adding the loseContext() function to the unmounting function of . But am still surprised this is even necessary. ( is a component oft the react-babylonjs library) ---
**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\ **Post date:** [April 3, 2024, 5:26pm UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/15 "2024-04-03T17:26:59Z")
@dennemark I don’t think we want to keep the engine running… we should pass this as true probably and add an opt-out (reverse): [EngineOptions | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/typedoc/interfaces/BABYLON.EngineOptions#loseContextOnDispose) ---
**Author:** ![dennemark](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dennemark/32/10745_2.png) [@dennemark](https://forum.babylonjs.com/u/dennemark)\ **Post date:** [April 4, 2024, 6:28am UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/16 "2024-04-04T06:28:05Z")
Ah nice! I wasn’t aware of this flag! I agree, we could use true as a default! Bit annoying to have this flag set on false for backwards compatibility, but it is great that it is documented. ---
**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\ **Post date:** [April 6, 2024, 5:41pm UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/17 "2024-04-06T17:41:22Z")
I’m thinking to add this - otherwise it can be passed in with the other options - does that look reasonable: ```jsx if (engineOptions === undefined) { engineOptions = { loseContextOnDispose: true }; } ``` I thought about adding a `keepContextOnDispose` property that defaulted to false, but I think that could be a bit confusing. ---
**Author:** ![dennemark](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dennemark/32/10745_2.png) [@dennemark](https://forum.babylonjs.com/u/dennemark)\ **Post date:** [April 9, 2024, 1:49pm UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/18 "2024-04-09T13:49:56Z")
looks good to me! i do not think keepContextOnDispose is necessary. ---
**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\ **Post date:** [April 10, 2024, 12:01am UTC](https://forum.babylonjs.com/t/react-babylonjs-webgl-context-lost/48898/19 "2024-04-10T00:01:49Z")
thanks @dennemark - i have the context lost default change sitting here with other new stuff: [add: WebGPUEngine and FallbackEngine by brianzinn · Pull Request #315 · brianzinn/react-babylonjs (github.com)](https://github.com/brianzinn/react-babylonjs/pull/315) I’ll wait to see if there’s any community feedback. Not expecting any TBH. Will push out a new version on the weekend likely. Cheers.