import { useState, useEffect } from "react"; import LoginModal from "./LoginModal"; import { NavLink, useLocation, useNavigate } from "react-router-dom"; import { useDispatch } from "react-redux"; import { userLogout } from "../Features/User/userSlice"; import decode from "jwt-decode"; const Header = ({ toggleModalShow, showModal }) => { const [burgerAnimation, setBurgerAnimation] = useState(false); const [user, setUser] = useState(); const location = useLocation(); const dispatch = useDispatch(); const navigate = useNavigate(); // for showing login/sign up modal const showModalButton = () => { toggleModalShow(); }; const handleBurgerAnimation = () => { setBurgerAnimation(!burgerAnimation); }; const handleLogout = async (id) => { await dispatch(userLogout({ id, navigate, dispatch })); setUser(null); }; const burgerListItemAnimation = ... const burgerIconAnimation = ... const guestHeader = ( <ul> ... </ul> ); const userHeader = ( <ul> ... </ul> ); useEffect(() => { if (localStorage.getItem("user") && !user) { setUser(JSON.parse(localStorage.getItem("user"))); } const accessToken = user?.accessToken; if (accessToken) { const decodedAccessToken = decode(accessToken); if(decodedAccessToken.exp * 1000 < new Date().getTime()){ handleLogout(user.user._id); } console.log(decodedAccessToken); } }, [location, user]); return ( <header className="header"> ... </header> ); }; export default Header; Hola a todos. Solo quería intentar cerrar la sesión del usuario cuando finalice la fecha de vencimiento. Si pongo 'handleLogout' en useEffect, la advertencia de dependencias no cambia. ¿Por qué recibo esta advertencia? ¿Qué tipo de advertencia puedo recibir si no soluciono eso? Y finalmente, si tiene tiempo para revisar el repositorio, ¿nos daría su opinión?
repositorio: https://github.com/UmutPalabiyik/mook
Si mantiene handleLogout externo al useEffect , debe aparecer como una dependencia, ya que se hace referencia en la devolución de llamada del enlace.
Si pongo
handleLogoutenuseEffect, la advertencia de dependencias no cambia.
Dudo que la advertencia sea la misma. En este punto, esperaría que la advertencia cambiara a algo así como "la dependencia handleLogout se vuelve a declarar en cada ciclo de procesamiento, ya sea que la mueva al gancho useEffect o la memoice con useCallback ..." algo por el estilo.
A partir de aquí tienes las 2 opciones.
Mueva handleLogout a useEffect para que ya no sea una dependencia externa.
useEffect(() => { const handleLogout = async (id) => { await dispatch(userLogout({ id, navigate, dispatch })); setUser(null); }; if (localStorage.getItem("user") && !user) { setUser(JSON.parse(localStorage.getItem("user"))); } const accessToken = user?.accessToken; if (accessToken) { const decodedAccessToken = decode(accessToken); if (decodedAccessToken.exp * 1000 < new Date().getTime()) { handleLogout(user.user._id); } console.log(decodedAccessToken); } }, [location, user, id, navigate, dispatch]); Memoice handleLogout con useCallback para que sea una referencia estable y agréguelo a las dependencias del efecto.
const handleLogout = useCallback(async (id) => { await dispatch(userLogout({ id, navigate, dispatch })); setUser(null); }, [id, navigate, dispatch]);...
useEffect(() => { if (localStorage.getItem("user") && !user) { setUser(JSON.parse(localStorage.getItem("user"))); } const accessToken = user?.accessToken; if (accessToken) { const decodedAccessToken = decode(accessToken); if (decodedAccessToken.exp * 1000 < new Date().getTime()) { handleLogout(user.user._id); } console.log(decodedAccessToken); } }, [location, user, handleLogout]);