Infinite loop in useEffect making app slow down-CodePudding

I am trying to get Routes based on a list that is coming from firebase realtime db and here is my code :

import { onValue, ref } from "firebase/database";
import React, { useEffect, useState } from "react";
import { Route, Routes } from "react-router-dom";
import "./App.css";
import Changepassword from "./Changepassword";
import Editprofile from "./Editprofile";
import Explore from "./Explore";
import { database } from "./firebase";
import ForgotPassword from "./ForgotPassword";
import Home from "./Home";
import Login from "./Login";
import NotFound from "./NotFound";
import SignUp from "./SignUp";
import ViewingProfile from "./ViewingProfile";
function App() {
  const [array2, setArray2] = useState([]);
  var array1 = [];
  useEffect(() => {
    onValue(ref(database, "/users/"), (snapshot) => {
      Object.values(snapshot.val()).map((w) => {
        return array1.push(w);
      });
    });
    const newArray = array1.map((object) => object.username);
    setArray2(newArray);
  }, [array1]);
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      <Route path="/signup" element={<SignUp />} />
      <Route path="/*" element={<NotFound />} />
      <Route path="/edit-profile" element={<Editprofile />} />
      <Route path="/change-password" element={<Changepassword />} />
      <Route path="/explore" element={<Explore />} />
      <Route path="/forgot-password" element={<ForgotPassword />} />
      {array2.map((name) => {
        return (
          <Route path={`/${name}`} element={<ViewingProfile name={name} />} />
        );
      })}
    </Routes>
  );
}

export default App;

So it works fine when i run it but in the console there is a error which is repeating like per nano second and i guess that slows the app down a lot so what should i do here to resolve the error or just tell the app not to give THAT specific error?

CodePudding user response：

Of course, you will have an error because you've set the useEffect to repeat when array1 is changed array1 is redeclared on each re-render so will the useEffect you can avoid this problem by using

const [array1,setArray1] = useState([])

CodePudding user response：

Inside your useEffect method you have onValue method which calls itself several times have you tried returning the onValue method?

useEffect(() => {
  return onValue() {
   ....     
 }
 })

CodePudding user response：

I dont know exactly what your code is doing but, Your useEffect has a dependancy of [array1] Everytime array1 changes, it essentially does the function inside use effect which modifies array1. That modification is most likely calling use effect to run in an endless loop. if you just put an empty array [] it will only run once. If that is not what you need then you need to change the dependancy to something that doesnt create the loop. You always need to ask the question, "When the thing inside this array changes, do I want this use effect to run?" when deciding what to put in this array.

useEffect(() => {
    onValue(ref(database, "/users/"), (snapshot) => {
      Object.values(snapshot.val()).map((w) => {
        return array1.push(w);
      });
    });
    const newArray = array1.map((object) => object.username);
    setArray2(newArray);
  }, [array1]) // << This dependancy is most likely creating an infinite loop.

Side note- the best way to tell an app not to show that error, is to fix the error lol, there is no magic hide error option, and if there potentially is, it's still better to fix the error.