How to Track User Dwell Time on Your Webpage with React

# Using Vite (recommended for new projects)
npm create vite@latest my-time-tracker-app -- --template react
cd my-time-tracker-app
npm install
npm run dev

# Or using Create React App
npx create-react-app my-time-tracker-app
cd my-time-tracker-app
npm start

// src/TimeOnPageTracker.jsx
import React, { useState, useEffect, useRef } from 'react';

const TimeOnPageTracker = ({ onTimeSpent }) => {
  const [startTime, setStartTime] = useState(null);
  const [duration, setDuration] = useState(0); // In seconds
  const intervalRef = useRef(null); // To store the interval ID for cleanup

  // Effect 1: Initialize timer and handle component unmount
  useEffect(() => {
    // Record the initial start time when the component mounts
    const initialStartTime = Date.now();
    setStartTime(initialStartTime);
    console.log('Page entered at:', new Date(initialStartTime).toLocaleTimeString());

    // Start an interval to update the duration every second
    intervalRef.current = setInterval(() => {
      setDuration(Math.floor((Date.now() - initialStartTime) / 1000));
    }, 1000);

    // Cleanup function: This runs when the component unmounts (user leaves the page)
    return () => {
      clearInterval(intervalRef.current); // Clear the interval to prevent memory leaks
      const endTime = Date.now();
      const finalDuration = Math.floor((endTime - initialStartTime) / 1000); // Calculate final duration in seconds
      console.log('Page left at:', new Date(endTime).toLocaleTimeString());
      console.log('Total time spent on page:', finalDuration, 'seconds');

      // Call the onTimeSpent prop to send the final duration to the parent
      if (onTimeSpent && typeof onTimeSpent === 'function') {
        onTimeSpent(finalDuration);
      }
    };
  }, [onTimeSpent]); // `onTimeSpent` is a dependency to ensure the cleanup function gets the latest version if it ever changes (though usually it's stable)

  // Effect 2: Handle page visibility changes (tab switching, minimizing)
  useEffect(() => {
    const handleVisibilityChange = () => {
      if (document.hidden) {
        // User switched tab or minimized browser - pause the timer
        console.log('User is inactive (tab hidden)');
        clearInterval(intervalRef.current);
      } else {
        // User returned to the tab - resume the timer
        console.log('User is active (tab visible)');
        if (startTime) { // Ensure startTime is set from the first effect
          // Adjust startTime to ensure continuous duration calculation
          // We set startTime to what it *should have been* to get the current duration
          setStartTime(Date.now() - (duration * 1000));
          // Restart the interval
          intervalRef.current = setInterval(() => {
            setDuration(Math.floor((Date.now() - startTime) / 1000));
          }, 1000);
        }
      }
    };

    // Add event listener for visibility changes
    document.addEventListener('visibilitychange', handleVisibilityChange);

    // Cleanup for this effect: remove the event listener
    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, [startTime, duration]); // Dependencies for this effect

  // Helper to format the duration into a human-readable string
  const formatDuration = (totalSeconds) => {
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;

    return `${hours > 0 ? `${hours}h ` : ''}${minutes > 0 ? `${minutes}m ` : ''}${seconds}s`;
  };

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', margin: '20px', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
      <h3>⏱️ Time Tracker</h3>
      <p>Time spent on this page: <strong>{formatDuration(duration)}</strong></p>
      <p style={{ fontSize: '0.8em', color: '#666' }}>
        (This timer updates live. The final time is logged when you leave or close this tab.)
      </p>
    </div>
  );
};

export default TimeOnPageTracker;

// src/App.jsx
import React from 'react';
import TimeOnPageTracker from './TimeOnPageTracker'; // Import our new component
import './App.css'; // Assuming you have some basic CSS

function App() {
  const handleTimeSpent = (timeInSeconds) => {
    // This function will be called by TimeOnPageTracker when the user leaves the page.
    // Here, you would typically send this data to your analytics service or backend.
    console.log(`User spent ${timeInSeconds} seconds on the page (from App.js callback).`);

    // Example of sending to an analytics service (replace with your actual implementation)
    // myAnalyticsService.track('time_on_page', { duration: timeInSeconds });

    // Or send to your backend API
    // fetch('/api/log-time', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify({ path: window.location.pathname, duration: timeInSeconds })
    // });
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My Awesome Website!</h1>
        <p>This is some content to keep you engaged.</p>
        <TimeOnPageTracker onTimeSpent={handleTimeSpent} />
      </header>

      <main style={{ padding: '20px' }}>
        <h2>Explore More Content</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
          eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        {/* Add some tall content to enable scrolling and test more interaction */}
        <div style={{ height: '800px', backgroundColor: '#e0e0e0', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '20px 0' }}>
          <p>More content here...</p>
        </div>
        <p>Thanks for visiting!</p>
      </main>
    </div>
  );
}

export default App;