---
title: "React keeps committing while the page is idle (smooth/react-idle-commits)"
description: "smooth/react-idle-commits: Timers, intervals or animation state that re-render React with no input keep the main thread busy and drain battery, and every…"
canonical: https://void.parthkapoor.me/rules/smooth/react-idle-commits
lastModified: 2026-09-16
---

# React keeps committing while the page is idle

`smooth/react-idle-commits` · severity **warn** · category Smoothness · detected by `void smooth` and `void audit`

## Why it matters

Timers, intervals or animation state that re-render React with no input keep the main thread busy and drain battery, and every commit competes with the next scroll or tap. The rendered UI is often not even on screen.

## How to fix it

Pause the source while it is not visible (IntersectionObserver, document.visibilityState), animate with CSS or WAAPI instead of state, and move ticking values into a ref or a small leaf component.

## Example

```
useEffect(() => {
  if (!visible) return;
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, [visible]);
```

## References

- https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

## More smoothness rules

`void smooth` reports 18 rules in this category. How the page feels after it loads: dropped frames during a scripted scroll, long animation frames, INP of real clicks, shifts after input, animated layout properties, idle rAF loops and reduced-motion handling.

- `reduced-motion-ignored` Animations keep running with prefers-reduced-motion — [smooth/reduced-motion-ignored](https://void.parthkapoor.me/rules/smooth/reduced-motion-ignored)
- `raf-loop-idle` requestAnimationFrame loop runs while idle — [smooth/raf-loop-idle](https://void.parthkapoor.me/rules/smooth/raf-loop-idle)
- `scroll-timeline-no-fallback` Content is invisible without scroll-driven-animation support — [smooth/scroll-timeline-no-fallback](https://void.parthkapoor.me/rules/smooth/scroll-timeline-no-fallback)
- `multiple-webgl-contexts` Multiple WebGL contexts — [smooth/multiple-webgl-contexts](https://void.parthkapoor.me/rules/smooth/multiple-webgl-contexts)
- `react-commits-on-scroll` React re-renders while the page scrolls — [smooth/react-commits-on-scroll](https://void.parthkapoor.me/rules/smooth/react-commits-on-scroll)
- `react-wasted-renders` React component re-renders with unchanged props — [smooth/react-wasted-renders](https://void.parthkapoor.me/rules/smooth/react-wasted-renders)
- `react-render-storm` One React commit re-renders hundreds of components — [smooth/react-render-storm](https://void.parthkapoor.me/rules/smooth/react-render-storm)
- `react-no-names` React component names are minified — [smooth/react-no-names](https://void.parthkapoor.me/rules/smooth/react-no-names)

Detected by `void smooth` and `void audit`. Explain it in a terminal: `void rules smooth/react-idle-commits`