Soy relativamente nuevo en React, por lo que probablemente sea una respuesta fácil para algunos de ustedes.

Me encontré con un pequeño problema, lo resolví, pero no parece ser perfecto ya que React Eslint no está feliz.

Mi aplicación web usa React-Redux en la parte delantera y Node-Express-Mongo en la parte posterior. Entonces, tengo un componente funcional (pantalla/página), y cada vez que un usuario lo visita, necesita actualizar el estado de los datos del usuario en la tienda Redux para asegurarse de que coincida con los datos actuales en la base de datos.

Sin embargo, los usuarios que no están registrados y que no han iniciado sesión también pueden visitar esa página, entonces, obviamente, no se necesita verificar la base de datos.

Obtengo datos de usuario como objeto userInfo de Redux:

 const userLogin = useSelector((state) => state.userLogin); const { loading: loadingUser, error: errorUser, userInfo } = userLogin;

Luego, cuando el componente procesa useEffect() , envío una acción para obtener los datos del usuario del backend (DB) usando el token JWT.

 useEffect(() => { //update user details in case if access to restricted services changes if (userInfo && userInfo.token) { dispatch(refreshUser(userInfo.token)); } // eslint-disable-next-line }, []);

Como puede ver, mantuve la matriz de dependencia vacía y la deshabilité para eslint para mantener contento al Sr. Eslint.

Hasta ahora, esta es la única forma en que puedo hacer que funcione. Si pongo userInfo en la matriz de dependencias, crea un bucle infinito, porque como sabemos, {}==={} siempre devuelve false .

Si me deshago de userInfo de useEffect() y mantengo solo userInfo.token , pero luego crea un error userInfo is undefined siempre que el usuario no haya iniciado sesión

Por supuesto, puedo llenar la tienda Redux con algún estado inicial de userInfo userInfo.token , pero eso parece ser una molestia innecesaria. También traté de poner useEffect dentro de la instrucción if (userInfo){} , pero eso fue una tontería, ya que useEffect() debería permanecer en el nivel superior...

Tal como está ahora, hace lo que necesito que haga: se ejecuta solo una vez mientras se carga el componente (página).

Entonces mi pregunta es: ¿Está bien dejarlo así o debe haber alguna solución elegante?