Pemisahan Loop Rendering untuk Mencegah Frame Drop Saat Menggunakan React dan WebGL Bersamaan

Menambahkan kanvas WebGL ke dashboard Next.js ternyata lebih rumit dari yang dibayangkan. Menambahkan chart yang memukau atau elemen grafis yang berat sering kali membuat layar menjadi tersendat-sendat (lag). Hanya dengan menggerakkan mouse saja frame bisa turun, dan tentu saja hal ini membuat frustrasi developer ketika dashboard yang sudah dibuat dengan susah payah menjadi patah-patah.

Masalah ini biasanya terjadi karena adanya benturan antara cara manajemen state React dan cara rendering WebGL. Jika Anda tidak memisahkan cara kerja kedua mesin ini, layar akan terus mengalami lag betapapun bagusnya library yang Anda gunakan.

Masalah Masuknya Library Grafis Secara Utuh ke Main Bundle

Library seperti Three.js atau Deck.gl memiliki ukuran yang besar karena di dalamnya terdapat mesin operasi matematika dan compiler shader. Jika Anda mengimpor paket dari bagian atas tanpa berpikir panjang, bahkan kode yang tidak digunakan pun akan ikut tercampur ke dalam main bundle.

Jika Anda berada di lingkungan Next.js, Anda harus meringankan beban ini dengan mengombinasikan impor subpath langsung dan konfigurasi dynamic load. Cara ini juga sekaligus dapat mencegah error window is not defined yang sering muncul saat Server-Side Rendering.

`javascript
// next.config.mjs
import withBundleAnalyzer from '@next/bundle-analyzer';

const bundleAnalyzer = withBundleAnalyzer({
enabled: process.env.ANALYZE === 'true',
});

/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
experimental: {
optimizePackageImports: [
'@radix-ui/react-icons',
'lucide-react',
'three',
'deck.gl'
],
},
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.fallback = {
...config.resolve.fallback,
fs: false,
path: false,
};
}
return config;
},
};

export default bundleAnalyzer(nextConfig);

Setelah melewati pengaturan ini, sumber daya grafis tidak akan dimuat secara sekaligus pada awal pemuatan halaman, melainkan dibagi saat dibutuhkan. Jika Anda memeriksanya dengan bundle analyzer, Anda dapat melihat bahwa kode terkait kanvas yang sebelumnya terikat pada file JS utama telah terpisah menjadi bagian yang mandiri.

Pada wrapper komponen klien, impor dilakukan dengan menonaktifkan SSR.

`typescript
// components/dashboard/CanvasDashboardWrapper.tsx
'use client';

import dynamic from 'next/dynamic';
import { Skeleton } from '@/components/ui/skeleton';

const DynamicCanvasRenderer = dynamic(
() => import('./CanvasRenderer').then((mod) => mod.CanvasRenderer),
{
ssr: false,
loading: () => (

),
}
);

export function CanvasDashboardWrapper() {
return (

);
}

Dengan konfigurasi ini, Anda akan langsung mendapatkan tiga efek:

Mendaftarkan paket ke next.config.mjs untuk mendorong penghilangan modul yang tidak perlu.
Memberikan { ssr: false } pada next/dynamic untuk memblokir error runtime pada saat rendering server.
Menampilkan Skeleton dengan tinggi tetap untuk mengatasi fenomena layout yang bergeser sebelum data masuk.

Jika Anda menggunakan Tailwind CSS, Anda juga perlu memeriksa event pointer. Terapkan pointer-events-none pada seluruh wrapper kanvas agar event lolos ke DOM di belakangnya, lalu berikan kembali pointer-events-auto hanya pada layer objek yang benar-benar membutuhkan manipulasi.

Menyingkirkan useState dari Dalam Loop Kanvas

React akan menggambar ulang Virtual DOM ketika state (useState, useContext) berubah. Di sisi lain, WebGL menggambar ulang layar sebanyak 60 kali per detik melalui requestAnimationFrame.

Apa yang akan terjadi jika Anda memanggil fungsi pengubah state React di dalam loop yang berjalan 60 kali per detik? Operasi Reconciliation React akan berjalan setiap frame dan membuat thread utama menjadi beku. Inilah alasan sebenarnya mengapa layar menjadi patah-patah.

Nilai yang berubah harus disimpan di dalam useRef, dan pekerjaan menggambar layar harus diserahkan sepenuhnya kepada loop requestAnimationFrame.

`typescript
// hooks/useAnimationFrame.ts
import { useEffect, useRef } from 'react';

type AnimationCallback = (deltaTime: number, timestamp: number) => void;

export const useAnimationFrame = (callback: AnimationCallback, isPaused: boolean = false) => {
const requestRef = useRef<number | null>(null);
const previousTimeRef = useRef<number | null>(null);
const callbackRef = useRef(callback);

useEffect(() => {
callbackRef.current = callback;
}, [callback]);

useEffect(() => {
if (isPaused) {
if (requestRef.current !== null) {
cancelAnimationFrame(requestRef.current);
}
return;
}

const animate = (timestamp: number) => {
  if (previousTimeRef.current !== null) {
    const deltaTime = timestamp - previousTimeRef.current;
    callbackRef.current(deltaTime, timestamp);
  }
  previousTimeRef.current = timestamp;
  requestRef.current = requestAnimationFrame(animate);
};

requestRef.current = requestAnimationFrame(animate);

return () => {
  if (requestRef.current !== null) {
    cancelAnimationFrame(requestRef.current);
  }
};

}, [isPaused]);
};

Hal yang sama juga berlaku untuk event yang sering terjadi seperti pergerakan mouse atau drag. Jika Anda memperbarui state React dari event handler, Garbage Collection akan terjadi secara menumpuk dalam waktu singkat dan memicu lag.

Kita mengubah strukturnya:

Data yang sering berubah seperti posisi mouse atau nilai rotasi ditimpa pada current milik useRef.
Membuat loop requestAnimationFrame yang unik menggunakan hook useAnimationFrame.
Fungsi rendering hanya membaca nilai Ref ini dan menggambarkannya ke kanvas. Karena tidak menyentuh state React, proses re-rendering itu sendiri tidak akan terjadi.

Penanganan Fallback untuk Browser yang Tidak Mendukung

Seperti spesifikasi HTML in Canvas yang sedang dibahas di WICG, terdapat upaya untuk menggambar DOM secara langsung ke bitmap kanvas menggunakan metode seperti drawElementImage. Fitur ini berfungsi dengan baik di lingkungan flag Chrome terbaru, namun jika Anda mengandalkannya begitu saja di dunia nyata, layar akan rusak total pada browser lama atau beberapa perangkat seluler.

Kita membaca ketersediaan dukungan fitur terlebih dahulu dan membungkusnya dengan Error Boundary untuk mengantisipasi situasi pengecualian.

`typescript
// components/canvas/CanvasErrorBoundary.tsx
'use client';

import React, { Component, ErrorInfo, ReactNode } from 'react';
import { detectCanvasCapabilities } from '@/utils/canvasFeatureDetection';

interface Props {
children: ReactNode;
fallbackUI: ReactNode;
}

interface State {
hasError: boolean;
isSupported: boolean;
}

export class CanvasErrorBoundary extends Component<Props, State> {
public state: State = {
hasError: false,
isSupported: true,
};

public componentDidMount() {
const capabilities = detectCanvasCapabilities();
if (!capabilities.webgl2) {
this.setState({ isSupported: false });
}
}

public static getDerivedStateFromError(_: Error): Partial {
return { hasError: true };
}

public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
console.error('Canvas UI Rendering Engine Crashed:', error, errorInfo);
}

public render() {
if (this.state.hasError || !this.state.isSupported) {
return (

{this.props.fallbackUI}

);
}

return (
  <div className="relative w-full h-full min-h-[400px] overflow-hidden">
    {this.props.children}
  </div>
);

}
}

Berikut adalah cara memasang jaring pengaman:

Memeriksa status dukungan WebGL2 melalui logika pemeriksaan konteks kanvas.
Menangkap error runtime yang terjadi selama rendering menggunakan Error Boundary berbasis kelas React.
Menetapkan tinggi minimum seperti min-h-[400px] pada kotak wrapper untuk mencegah rasio layar hancur saat beralih ke UI fallback (seperti chart HTML/SVG biasa).

Memori GPU Tidak Dibersihkan oleh Garbage Collector JavaScript

Mesin V8 membersihkan objek yang ada di dalam heap JavaScript dengan baik. Namun, ia tidak mengetahui data yang ditempatkan di memori GPU seperti buffer WebGL, texture, dan program shader.

Jika Anda tidak menghapus sumber daya ini secara eksplisit saat berpindah halaman atau menavigasi tab dashboard, memori GPU akan terus menumpuk hingga tab browser mengalami crash disertai error Context lost.

`typescript
// hooks/useWebGLCleanUp.ts
import { useEffect, useRef } from 'react';

export const useWebGLCleanUp = () => {
const glRef = useRef<WebGL2RenderingContext | null>(null);
const resourcesRef = useRef<{
buffers: WebGLBuffer[];
textures: WebGLTexture[];
programs: WebGLProgram[];
}>({
buffers: [],
textures: [],
programs: [],
});

const registerBuffer = (buffer: WebGLBuffer) => resourcesRef.current.buffers.push(buffer);
const registerTexture = (texture: WebGLTexture) => resourcesRef.current.textures.push(texture);
const registerProgram = (program: WebGLProgram) => resourcesRef.current.programs.push(program);

useEffect(() => {
return () => {
const gl = glRef.current;
if (!gl) return;

  resourcesRef.current.buffers.forEach((buffer) => gl.deleteBuffer(buffer));
  resourcesRef.current.textures.forEach((texture) => gl.deleteTexture(texture));

  resourcesRef.current.programs.forEach((program) => {
    const shaders = gl.getAttachedShaders(program);
    if (shaders) {
      shaders.forEach((shader) => {
        gl.detachShader(program, shader);
        gl.deleteShader(shader);
      });
    }
    gl.deleteProgram(program);
  });

  const loseContextExt = gl.getExtension('WEBGL_lose_context');
  if (loseContextExt) {
    loseContextExt.loseContext();
  }

  resourcesRef.current = { buffers: [], textures: [], programs: [] };
  glRef.current = null;
};

}, []);

return { glRef, registerBuffer, registerTexture, registerProgram };
};

Berikut adalah urutan untuk memverifikasi secara langsung melalui Chrome DevTools apakah memori dilepaskan dengan benar:

Buka komponen dashboard dan ambil snapshot heap pertama (S1) di tab Memory.
Ulangi proses mounting dan unmounting komponen (seperti berpindah tab lain) sebanyak 10 kali atau lebih.
Tekan pengumpulan sampah manual (ikon tempat sampah) lalu ambil snapshot heap kedua (S2).
Atur pembanding S2 ke S1 dan pastikan jumlah Detached HTMLCanvasElement atau WebGLBuffer tidak bersisa dan turun menjadi 0.

Kunci utama saat menggunakan React dan WebGL secara bersamaan adalah menjaga agar area keahlian masing-masing library tidak saling mengganggu. Memecah bundle, menyingkirkan state React dari loop rendering, serta memastikan memori GPU dikosongkan saat komponen hilang. Hanya dengan memperhatikan ketiga hal ini saja, Anda sudah bisa membuat dashboard yang berjalan bersih tanpa frame drop.

Pemisahan Loop Rendering untuk Mencegah Frame Drop Saat Menggunakan React dan WebGL Bersamaan

Masalah Masuknya Library Grafis Secara Utuh ke Main Bundle

`javascript
// next.config.mjs
import withBundleAnalyzer from '@next/bundle-analyzer';

const bundleAnalyzer = withBundleAnalyzer({
enabled: process.env.ANALYZE === 'true',
});

export default bundleAnalyzer(nextConfig);

Pada wrapper komponen klien, impor dilakukan dengan menonaktifkan SSR.

`typescript
// components/dashboard/CanvasDashboardWrapper.tsx
'use client';

import dynamic from 'next/dynamic';
import { Skeleton } from '@/components/ui/skeleton';

const DynamicCanvasRenderer = dynamic(
() => import('./CanvasRenderer').then((mod) => mod.CanvasRenderer),
{
ssr: false,
loading: () => (

),
}
);

export function CanvasDashboardWrapper() {
return (

);
}

Dengan konfigurasi ini, Anda akan langsung mendapatkan tiga efek:

Mendaftarkan paket ke next.config.mjs untuk mendorong penghilangan modul yang tidak perlu.
Memberikan { ssr: false } pada next/dynamic untuk memblokir error runtime pada saat rendering server.
Menampilkan Skeleton dengan tinggi tetap untuk mengatasi fenomena layout yang bergeser sebelum data masuk.

Menyingkirkan useState dari Dalam Loop Kanvas

React akan menggambar ulang Virtual DOM ketika state (useState, useContext) berubah. Di sisi lain, WebGL menggambar ulang layar sebanyak 60 kali per detik melalui requestAnimationFrame.

Nilai yang berubah harus disimpan di dalam useRef, dan pekerjaan menggambar layar harus diserahkan sepenuhnya kepada loop requestAnimationFrame.

`typescript
// hooks/useAnimationFrame.ts
import { useEffect, useRef } from 'react';

type AnimationCallback = (deltaTime: number, timestamp: number) => void;

useEffect(() => {
callbackRef.current = callback;
}, [callback]);

useEffect(() => {
if (isPaused) {
if (requestRef.current !== null) {
cancelAnimationFrame(requestRef.current);
}
return;
}

const animate = (timestamp: number) => {
  if (previousTimeRef.current !== null) {
    const deltaTime = timestamp - previousTimeRef.current;
    callbackRef.current(deltaTime, timestamp);
  }
  previousTimeRef.current = timestamp;
  requestRef.current = requestAnimationFrame(animate);
};

requestRef.current = requestAnimationFrame(animate);

return () => {
  if (requestRef.current !== null) {
    cancelAnimationFrame(requestRef.current);
  }
};

}, [isPaused]);
};

Kita mengubah strukturnya:

Data yang sering berubah seperti posisi mouse atau nilai rotasi ditimpa pada current milik useRef.
Membuat loop requestAnimationFrame yang unik menggunakan hook useAnimationFrame.
Fungsi rendering hanya membaca nilai Ref ini dan menggambarkannya ke kanvas. Karena tidak menyentuh state React, proses re-rendering itu sendiri tidak akan terjadi.