How can I implement session timeout in my React app using hooks?

How can I implement session timeout in my React app using hooks?

You can use the useEffect hook to set a timeout for user inactivity. Would you like a code example?

Yes, please provide a code example.

Here's a simple example:

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

const SessionTimeout = () => {
    const [isLoggedIn, setIsLoggedIn] = useState(true);

    useEffect(() => {
        const timer = setTimeout(() => {
            setIsLoggedIn(false);
            alert('Session timed out!');
        }, 300000); // 5 minutes

        return () => clearTimeout(timer);
    }, []);

    return <div>{isLoggedIn ? 'Welcome back!' : 'Please log in again.'}</div>;
};

This will log the user out after 5 minutes of inactivity.

What if I want to reset the timer on user activity?

You can add event listeners for user activity like mouse movements or key presses to reset the timer. Would you like to see how?