0

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;
4
  • Si estas usando react 18, useEffect hace doble re-render en dev, más aquí
    – g.4
    el 10 dic. 2022 a las 16:20
  • Tengo entendido que eso ocurre con la etiqueta "StrickMode", pero la tengo comentada
    – Juange94
    el 10 dic. 2022 a las 17:18
  • Quita el location del arreglo de dependencias, pues esto es lo que hace que cada vez que eso cambie ese useEffect se dispare. el 12 dic. 2022 a las 19:40
  • Necesito tener ese arreglo, la cuestión es que desconozco porque se renderiza 2 veces.
    – Juange94
    el 17 dic. 2022 a las 11:26

1 respuesta 1

0

Finalmente ya entiendo como funciona useEffect, en primer lugar se renderiza el componente, luego llama a useEffect, y se vuelve a renderizar.

Por lo que la opción mas sencilla es poner un condicional en la ejecución del useEffect de forma que una vez que se haya renderizado el componente, se ejecuta dicho useEffect una única vez, para esto he tenido que cambiar la dependencia por una variable en lugar de un hook como es useLocation()

Espero que a alguien le sirva.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.