# Bypass React Render with Refs

**SHOULD** · **ID:** `performance-refs-bypass-render` · **Category:** performance
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/performance-refs-bypass-render

> SHOULD: For high-frequency real-time values (pointer position, scroll, rAF), write to the DOM through a `ref` instead of `useState` — the visual result is identical with zero re-renders.

Use refs for real-time values that update the DOM directly to avoid unnecessary re-renders

For high-frequency updates like mouse position tracking, scroll values, or animation frames, using useState causes a full component re-render on every update. Using refs and updating the DOM directly bypasses the React render cycle entirely, achieving the same visual result with zero re-renders.

## Rule snippet

```tsx
const el = useRef<HTMLDivElement>(null);
onPointerMove = (e) => { el.current!.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`; };
```

## Bad — do not do this

`performance-refs-bypass-render-bad`

```tsx
import { useState } from 'react';

export function RefsBypassRenderBad() {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  const [renderCount, setRenderCount] = useState(0);

  return (
    <div className="w-full max-w-sm space-y-4">
      <div
        className="bg-card border border-border rounded-lg p-4 h-40 relative cursor-crosshair"
        onMouseMove={(e) => {
          const rect = e.currentTarget.getBoundingClientRect();
          setPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
          setRenderCount(c => c + 1);
        }}
      >
        <div className="text-xs text-muted-foreground">Move your mouse here</div>
        <div className="absolute bottom-2 left-2 text-xs text-foreground font-mono">
          x: {Math.round(pos.x)}, y: {Math.round(pos.y)}
        </div>
        <div className="absolute bottom-2 right-2 text-xs text-error font-mono">
          Renders: {renderCount}
        </div>
      </div>
      <p className="text-xs text-error">useState on every mousemove — full re-render each time</p>
    </div>
  );
}
```

## Good — do this

`performance-refs-bypass-render-good`

```tsx
import { useRef, useCallback } from 'react';

export function RefsBypassRenderGood() {
  const coordsRef = useRef<HTMLDivElement>(null);
  const countRef = useRef(0);
  const countDisplayRef = useRef<HTMLDivElement>(null);

  const handleMouseMove = useCallback((e: React.MouseEvent) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = Math.round(e.clientX - rect.left);
    const y = Math.round(e.clientY - rect.top);
    if (coordsRef.current) coordsRef.current.textContent = `x: ${x}, y: ${y}`;
    countRef.current++;
    if (countDisplayRef.current) countDisplayRef.current.textContent = `Updates: ${countRef.current}`;
  }, []);

  return (
    <div className="w-full max-w-sm space-y-4">
      <div
        className="bg-card border border-border rounded-lg p-4 h-40 relative cursor-crosshair"
        onMouseMove={handleMouseMove}
      >
        <div className="text-xs text-muted-foreground">Move your mouse here</div>
        <div ref={coordsRef} className="absolute bottom-2 left-2 text-xs text-foreground font-mono">
          x: 0, y: 0
        </div>
        <div ref={countDisplayRef} className="absolute bottom-2 right-2 text-xs text-success font-mono">
          Updates: 0
        </div>
      </div>
      <p className="text-xs text-success">Refs + direct DOM — zero re-renders, same result</p>
    </div>
  );
}
```

## References

- [interfaces.rauno.me](https://interfaces.rauno.me/)