Reactive Polling

Poll for changes to any value and trigger React re-renders when it changes.

Technique

Create a useReactive hook that uses useFrame to periodically check a selector function. When the value changes, update React state to trigger a re-render. Throttle with a configurable FPS.

Key Concepts

• Selector function returns the value to watch
• Compare with previous value to detect changes
• Only update state when value actually changes
• Throttle polling with useFrame's fps option
• Use sparingly for values that don't change frequently

Usage

tsx
1const useReactive = <T,>(selector: () => T, fps = 30): T => {
2  const [reactiveValue, setReactiveValue] = useState<T>(selector())
3  const previousValueRef = useRef(reactiveValue)
4
5  useFrame(
6    () => {
7      const newValue = selector()
8      if (previousValueRef.current !== newValue) {
9        previousValueRef.current = newValue
10        setReactiveValue(newValue)
11      }
12    },
13    { fps }
14  )
15
16  return reactiveValue
17}
18
19// Usage
20const isAboveZero = useReactive(() => position.y > 0)

This skill is part of verekia's r3f-gamedev.