---
title: "Reduce Jitter in React Three Fiber Without Raising FPS"
description: "Jitter in a React Three Fiber scene often comes from per-frame work, not low FPS. Throttling a focus raycast to ~10/s fixed it in Antarang."
url: https://www.shreyanshkumarsingh.com/notes/react-three-fiber-raycast-throttling
author: Shreyansh Kumar Singh
updated: 2026-10-08
---

# Reduce Jitter in React Three Fiber Without Raising FPS

By Shreyansh Kumar Singh · 2026-10-08

**How do you reduce jitter in a React Three Fiber scene without raising the frame rate?**

Find the per-frame work that changes what's on screen and run it less often. In Antarang's walkable 3D museum, the centre-screen raycast that decides which artwork you're focused on ran every frame; throttling it to about ten times a second made the gallery feel smoother than any frame-rate tuning did.

## Jitter isn't the same as low FPS

A scene can hold 60 frames per second and still feel jittery. The usual cause is state that flips back and forth between frames: a focus highlight toggling as the crosshair sits on the edge of a frame, a label re-rendering, a React state update every frame that re-renders part of the tree. Each frame is on time; the content is unstable.

## Throttle the raycast

A raycast every frame is both expensive and twitchy. Accumulate time in useFrame and only cast when enough has passed — and only set React state when the focused object actually changes:

```tsx
// illustrative — the pattern, not Antarang's exact source
const raycaster = new THREE.Raycaster();
const centre = new THREE.Vector2(0, 0);
let acc = 0;

useFrame((state, delta) => {
  acc += delta;
  if (acc < 0.1) return;            // ~10 checks per second
  acc = 0;
  raycaster.setFromCamera(centre, state.camera);
  const hit = raycaster.intersectObjects(artworks, false)[0];
  const id = hit?.object.userData.id ?? null;
  if (id !== focusedRef.current) {  // update state only on change
    focusedRef.current = id;
    setFocused(id);
  }
});
```

## Then hold the frame rate cheaply

Once the jitter is gone, protect the frame rate on weaker GPUs instead of chasing it everywhere: Antarang caps the device pixel ratio (to 1.8), uses drei's PerformanceMonitor and AdaptiveDpr to lower resolution under load, code-splits the 3D gallery out of the first page load, and turns off decorative motion (dust motes, head-bob) under reduced-motion settings.


---

Shreyansh Kumar Singh — AI & Full-Stack Engineer, Pune, India. Contact: shreyanshkumarsingh208@gmail.com or https://www.shreyanshkumarsingh.com/contact (call and WhatsApp buttons). More: https://www.shreyanshkumarsingh.com/llms.txt · https://www.shreyanshkumarsingh.com/sitemap.xml