React Game Loop Hooks

Create custom React hooks in TypeScript for game loops and animations. Use when the user asks for a React hook, requestAnimationFrame integration, game loop...

Security Scan

The skill's code, instructions, and metadata are coherent with its stated purpose (a browser-only React hook for game loops) and do not request extra credentials, install arbitrary binaries, or perform suspicious actions.

Purpose & Capability

The name/description (React game loop hooks) matches the included files and declared behavior. The files implement a requestAnimationFrame-based useGameLoop hook and an example component — nothing unrelated is requested.

Instruction Scope

SKILL.md instructs the agent/user to copy the hook file into their project and documents API, patterns, and an example. Instructions are narrowly scoped to installing and using the hook; they do not instruct reading unrelated files, accessing environment variables, or contacting external endpoints.

Install Mechanism

There is no install spec and no download/install-from-URL behavior. The code is provided in the skill assets and the user is instructed to copy the file into their project — low-risk and transparent.

Credentials

The skill requests no environment variables, credentials, or system config paths. Declared dependencies (React/TypeScript/react-dom) are appropriate and expected for a TypeScript React hook.

Persistence & Privilege

The skill does not request always:true and uses default user-invocable/autonomous settings. It does not modify other skills or system-wide settings and does not persist credentials.

Assessment

This skill appears to be what it claims: a small, browser-only React hook for game loops. Before installing, review the hook to ensure it matches your app's type/encoding (TypeScript/React versions) and confirm you only copy the files into projects that run in the browser (not SSR/Node). The hook catches callback errors and cleans up RAF on unmount, but as with any third-party code, inspect it for fit and license compatibility (MIT) before use.

Production-ready custom React hooks for game loops and animations using requestAnimationFrame.

Installation

Copy the hook file into your project:

# From your skill directory
cp <skill-dir>/assets/hooks/useGameLoop.ts src/hooks/

<skill-dir> resolves to your OpenClaw skill installation directory.

Dependencies

• React >= 16.8 (hooks support)
• TypeScript >= 4.0 (for type safety)
• react-dom >= 16.8 (for requestAnimationFrame types in browser environment)

This is a browser-only hook — it requires requestAnimationFrame, which is not available in Node.js or SSR environments.

API Reference

useGameLoop(options)

import { useGameLoop } from './hooks/useGameLoop';

Parameters:

Option	Type	Default	Description
onFrame	(deltaTime: number, elapsedTime: number) => void	—	Called every frame with delta (ms) and elapsed time (ms). Required.
maxDeltaTime	number	100	Maximum delta clamp in ms. Prevents huge jumps after tab-switch or lag.

Returns:

Field	Type	Description
start	() => void	Start the game loop
stop	() => void	Stop the game loop
isRunning	boolean	Current loop state

Patterns

Stale-closure safety

Use useRef for callbacks/state read inside async/closure contexts (e.g. requestAnimationFrame, setInterval, event listeners). Always sync ref in useEffect.

const cbRef = useRef(onFrame);
useEffect(() => { cbRef.current = onFrame; }, [onFrame]);

Cleanup on unmount

Always return cleanup from useEffect. For RAF/intervals, store handle in ref and cancel on unmount.

useEffect(() => {
  const id = requestAnimationFrame(tick);
  return () => cancelAnimationFrame(id);
}, []);

Error resilience

Wrap user callbacks in try/catch so errors don't break internal loop state.

try {
  callbackRef.current(delta, elapsed);
} catch (err) {
  console.error('hook callback error:', err);
}

Delta-time clamping

For game loops, clamp deltaTime to avoid huge jumps after tab-switch or lag spikes.

const delta = Math.min(rawDelta, maxDeltaTime);

Example

See assets/examples/GameTimer.tsx for a complete usage example showing elapsed time and FPS display.

Reference

• assets/hooks/useGameLoop.ts — requestAnimationFrame-based game loop with start/stop/isRunning controls, deltaTime clamping, and error resilience
• assets/examples/GameTimer.tsx — basic usage example