` but document.createElement(“div”) that’s vanilla js. ask yourself if not wanting react-dom in react makes any sense at all. the same exact thing applies to three. in the end mixing imperative and declarative is what’s causing the issues here, and always will, _using react_ is the only sensible solution, it’s literally why it exists. as for use effects, you can read about it [here](https://beta.reactjs.org/reference/react/StrictMode). the same applies to suspense or scheduling, react can unmount components at will, if your useEffect has side effects but no clean up phase you risk race conditions and double execution. as for logs, i’m not sure if that’s still true but react would [hijack console.log](https://camunda.com/blog/2021/02/be-careful-with-console-log-when-using-react-strictmode/), shutting it off so you didn’t see two logs but the effect ran twice anyway. ---

**Author:** ![9uifranco](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/9uifranco/32/33590_2.png) [@9uifranco](https://discourse.threejs.org/u/9uifranco)\ **Post date:** [February 17, 2023, 2:30am UTC](https://discourse.threejs.org/t/renderer-render-method-makes-an-webgl-error-in-useeffect/40866/5 "2023-02-17T02:30:02Z")

I was getting this error and my solution was to cancel the animation frame when my useEffect returns. “RequestAnimationFrame returns a `long` integer value, the request id, that uniquely identifies the entry in the callback list. This is a non-zero value, but you may not make any other assumptions about its value. You can pass this value to [`window.cancelAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame) to cancel the refresh callback request.” [More info here](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) So I created a variable ```javascript let myReq ``` Got the request ID ```javascript const animate = () => { . . . myReq = window.requestAnimationFrame(animate) } animate() ``` Added a return on my useEffect with the cancelAnimationFrame() function and passed the request ID as param ```javascript useEffect(() => { . . . return () => { window.cancelAnimationFrame(myReq) } }, []) ``` It’s ok for small projects but as you implement more features you will face more issues. I’m following your suggestion and am going to use react-three-fiber [drcmda](https://discourse.threejs.org/u/drcmda). ---

**Author:** ![Ify](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ify/32/43152_2.png) [@Ify](https://discourse.threejs.org/u/Ify)\ **Post date:** [December 19, 2023, 11:34pm UTC](https://discourse.threejs.org/t/renderer-render-method-makes-an-webgl-error-in-useeffect/40866/6 "2023-12-19T23:34:55Z")

I stumbled upon this error whilst playing around with **Three.js** recently. My fix was to save an instance of **WebGLRenderer** in a **useRef** object so it is skipped across react’s lifecycle updates. create a new reference directly to a DOM element [react useRef](https://react.dev/reference/react/useRef) ```javascript const rendererRef = useRef(); ``` instantiate **WebGLRenderer** and update **renderRef’s** current value. ```javascript useEffect(() => { if (canvas.current) { const webGLRenderer = new THREE.WebGLRenderer({ canvas: canvas.current, }); webGLRenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); webGLRenderer.setClearAlpha(0.1); renderer.current = webGLRenderer; } }, [canvas.current]); ``` Here is a working codesandbox [link](https://codesandbox.io/p/sandbox/threejs-sample-project-th83kn)