GPU Usage Sensor Not Reporting/Utilized When Using React 19 StrictMode (Works fine when StrictMode is removed)

[Houss-L]

When running an R3F scene under React 19’s StrictMode, the GPU is not being used anymore — the rendering seems to fall back to CPU or stops using WebGL properly.

The issue can be clearly observed using r3f-perf: the GPU usage indicator drops to 0%, while CPU metrics remain active.
When StrictMode is removed, everything works perfectly — GPU usage returns to normal and the scene performs as expected.

---

Steps to Reproduce

1. Clone or open this minimal demo:
   👉 https://stackblitz.com/edit/vitejs-vite-nlkcutn6

2. Run the project — observe the r3f-perf panel (GPU = 0%).

3. Open main.jsx and remove <React.StrictMode>.

4. Reload — GPU usage works correctly again.

---

Expected Behavior

R3F should still use GPU rendering normally even when running under React 19’s StrictMode.

---

Actual Behavior

When StrictMode is enabled:

• GPU usage stays at 0%.

• Removing StrictMode immediately restores proper GPU rendering.

-> This issue does **not occur with React 18** — GPU usage works normally under StrictMode in React 18. The problem only appears after upgrading to React 19, suggesting a potential change in how React 19’s StrictMode interacts with WebGL or side effects during renderer initialization.

---

Environment

Package -- React | 19.2.0 React DOM | 19.2.0 @react-three/fiber 9.4.0 @react-three/drei 10.7.7 three 0.181.1 r3f-perf 7.2.3 Browser Chrome / Edge (latest) Platform | Windows 11 / macOS (tested)

[anhldh]

React 19 StrictMode triggers mount/unmount/mount more aggressively, which can interrupt EXT_disjoint_timer_query (beginQuery without a matching endQuery), leaving the GPU timer stuck at 0. Explicitly ending and disposing active queries on unmount fixes the issue.

I’ve tried applying this fix in r3f-monitor and it seems to resolve the issue — GPU timing works correctly again under React 19 StrictMode.

In my case, I added a dispose() method to the GLPerf class and invoked it during the component unmount (the cleanup function of the effect).

dispose() {
  const gl = this.gl;
  const ext = this.extension;

  if (this.isWebGL2 && gl && ext) {
    const current = gl.getQuery(ext.TIME_ELAPSED_EXT, gl.CURRENT_QUERY);
    if (current) {
      gl.endQuery(ext.TIME_ELAPSED_EXT);
    }
  }

  if (gl && this.query) {
    gl.deleteQuery(this.query);
    this.query = null;
  }
}