performance

Enforce cleanup and resource management in React and Three.js applications.

Updated Mar 3, 2026

Search Tags:#performance #react #optimization #cleanup #three.js #memory-management

Ready to run

npx skills add https://github.com/GuyErreich/PersonalWebsite --skill performance-guyerreich

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/GuyErreich/PersonalWebsite/tree/main/.github/skills/performance
Command: npx skills add https://github.com/GuyErreich/PersonalWebsite --skill performance-guyerreich

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps engineers prevent memory leaks and optimize runtime performance in complex React + Three.js apps by enforcing robust cleanup, efficient rendering, and resource management.

Core Features & Use Cases

Prevent memory leaks with disciplined cleanup in useEffect, AudioContext, event listeners, and timers.
Optimize Three.js/Canvas performance through resource reuse, memoization, and code-splitting strategies.
Improve overall app robustness with profiling, validation, and best-practice checklists.

Quick Start

Apply cleanup and optimization patterns across components, scenes, and workers to ensure zero-leak performance.

Frequently Asked Questions about performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I prevent memory leaks in React and Three.js apps?▼

To prevent memory leaks in React and Three.js apps, enforce explicit cleanup in useEffect, dispose of WebGL GPU resources, close AudioContext properly, and remove event listeners and timers.

What is the best way to optimize Three.js rendering performance in React?▼

The best way to optimize Three.js rendering performance in React is to apply resource reuse, implement memoization, and adopt code-splitting strategies to minimize bundle size and improve runtime efficiency.

Why does my React component leak memory when using AudioContext and WebGL resources?▼

Your React component leaks memory when AudioContext and WebGL resources are not explicitly closed or disposed of during the useEffect cleanup phase, leaving background processes and GPU memory allocated.

How to handle useEffect cleanup for complex React Three.js dynamic rendering pipelines?▼

Handle useEffect cleanup for dynamic rendering pipelines by explicitly disposing of Three.js GPU resources, closing AudioContext, removing event listeners, and applying lazy loading to minimize bundle size.

Does this approach work for optimizing bundle size with lazy loading in React?▼

Yes, this approach works for optimizing bundle size by enforcing the adoption of memoization and lazy loading strategies, which minimizes the initial load and improves overall app robustness.