Tengo una aplicación SPA, para saber si un usuario está logueado, estoy intentando actualizar una variable con useState
dentro de un useEffect
que tiene como dependencia useLocation
pero la aplicación se renderiza 2 veces (React.strickMode
está comentado)
¿Cómo podría hacer para que no se renderice mas de una vez cuando cambio de ruta?
Index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
//<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
//</React.StrictMode>
);
App.js
import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
import Home from "./Components/Home";
import Dashboard from "./Components/Dashboard";
import { useEffect, useState } from "react";
function App() {
console.log("Render App")
const [ user, setUser ] = useState(false)
const location = useLocation();
const navigate = useNavigate();
useEffect(() => {
console.log(user);
setUser(true); // En mi aplicación, el valor sale de un método asíncrono
}, [location]);
return (
<div className="App">
<button onClick={() => navigate("/")}>Home</button>
<button onClick={() => navigate("/dashboard")}>Dashboard</button>
<Routes>
<Route index element={<Home />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</div>
);
}
export default App;