# Avoid unnecessary allocations

## Why Avoid Memory Allocations?

JavaScript runs in a garbage-collected environment. That means every time you create a new object such as `new Vector3()`, the runtime allocates memory for it, which itself takes time. Eventually, when it's no longer used, the garbage collector will analyse references and reclaim that memory. This process sounds automatic and helpful (and it is), but frequent allocations and deallocations can cause performance hiccups, especially in real-time graphics applications like games.

In your game, your rendering loop will run 60+ times per second. If you're constantly creating new vectors, matrices, or objects each frame, the garbage collector can kick in often, leading to dropped frames or stuttering animations. To ensure smooth performance, it’s crucial to **reuse objects** and **minimize allocations**, especially inside the render update loop.

## Best Practices for Avoiding Garbage Collection

1\. **Reuse Vector3, Vector2, Matrix4, and other Math Objects**

**Bad:**

```js
function update() {
  const direction = new Vector3().subVectors(target.position, camera.position);
  // ...
}
```

**Good:**

```js
const direction = new Vector3(); // allocate once

function update() {
  direction.subVectors(target.position, camera.position);
  // ...
}
```

> ✅ Allocate once outside the loop and reuse.

**2. Avoid Anonymous Math Expressions in Loops**

Each chained call like `.clone().add()` creates new objects under the hood unless you’re careful.

**Bad:**

```js
function update() {
  const newPos = object.position.clone().add(new Vector3(0, 1, 0));
  // ...
}
```

**Good:**

```js
const newPos = new Vector3()
const up = new Vector3(0, 1, 0);

function update() {
  newPos.copy(object.position).add(up);
  // ...
}
```

> ✅ Prefer `copy()` and `set()` over `clone()` inside tight loops.

***

**3. Use Temporary Scratch Variables**

Keep shared "temp" variables for calculations to avoid repeatedly creating them.

```js
const tempVec3 = new Vector3();
const tempQuat = new Quaternion();
const tempScale = new Vector3();

function updateTransform(object) {
  object.matrixWorld.decompose(tempVec3, tempQuat, tempScale);
  // Reuse tempVec3, tempQuat, tempScale
}
```

***

## Use Chrome DevTools to Monitor Allocations

Use the "Performance" and "Memory" tabs in Chrome DevTools:

* Record a session.
* Look for spikes in JS heap or GC pauses.
* Hover over memory allocations to see what’s triggering them.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hology.app/gameplay/performance/avoid-unnecessary-allocations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.