如何在react web应用程序中检测空闲时间？

import React, { useState, useEffect } from 'react';

function App() {
  const [isIdle, setIsIdle] = useState(false);

  useEffect(() => {
    let timeoutId;

    const resetTimeout = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => setIsIdle(true), 5000); // 设置5秒钟的空闲时间
    };

    const events = ['mousedown', 'mousemove', 'keydown', 'scroll', 'touchstart'];
    events.forEach((event) => {
      document.addEventListener(event, resetTimeout);
    });

    resetTimeout(); // 初始化空闲时间

    return () => {
      clearTimeout(timeoutId);
      events.forEach((event) => {
        document.removeEventListener(event, resetTimeout);
      });
    };
  }, []);

  return (
    <div>
      {isIdle ? <p>用户处于空闲状态。</p> : <p>用户正在活动。</p>}
    </div>
  );
}

export default App;