How to Stop useEffect running infinitely when using useNavigate inside it

Question

I am making an e-store. I have the uid of logged-in user. I am trying to make a condition that if the logged in user uid is not equal to admin uid, then I do not want that user to go on the admin page. The useEffect runs infinite.

    const navigate = useNavigate();
    const user = localStorage.getItem("uid");

    useEffect(() => {

        if (user === 'at64ZIYgqaawRyCAkH6xMYBRNwS2') {
            navigate('/admin')
        }
        else {
            navigate('/home')
        }
    })

I believe this [link](https://stackoverflow.com/questions/53243203/react-hook-useeffect-runs-continuously-forever-infinite-loop) should answer your question. — Dennis Quan, Nov 02 '22 at 07:20
Just add empty dependency array to the useEffect and ignore possible eslint warning. — user20386762, Nov 02 '22 at 09:12

score 0 · Answer 1 · edited Nov 05 '22 at 09:55

0

To useEffect is't running infinite:

useEffect(() => {

//Todo

}, [])

You can write variables state in [] or not.

edited Nov 05 '22 at 09:55

Mustafa Poya

2,615
5
22
36

answered Nov 02 '22 at 07:20

Anh Lee

11
1

I have tried dependency array but it does not worked. – Hamza Ilyas Nov 02 '22 at 07:32

score 0 · Answer 2 · answered Nov 02 '22 at 08:08

0

You should add dependencies array to the useEffect that means your hook should run every changes of dependencies; So if you wanna run only one time you should add an empty array to useEffect:

useEffect(() => {

        if (user === 'at64ZIYgqaawRyCAkH6xMYBRNwS2') {
            navigate('/admin')
        }
        else {
            navigate('/home')
        }
    }, []) // this [] is dependencies array

answered Nov 02 '22 at 08:08

N.SH

616
7
20

I have also used dependency array but still giving array. I think the problem is in using useNavigate hook multiple times inside a useEffect – Hamza Ilyas Nov 02 '22 at 09:12
So change your dependency array to this `[user, navigate]` – N.SH Nov 02 '22 at 09:17
still not working – Hamza Ilyas Nov 02 '22 at 09:42

score 0 · Answer 3 · answered Nov 02 '22 at 08:22

There are some things I want you to take into considerations.

In order to check if the user is admin or not, do not use this uid.

This might work for a single type of applications but suppose there are multiple admins trying to access the application at the same time, it will fail!

To compare the user type, you shouldn't use if else condition with the uid, instead you should fetch a get Api which takes the uid token as query and get the data from the database and then compare the user_type.

A basic example would be like this: Frontend:

const obj=axios.get("http://localhost:7099")
.then(res=>//..handle response)
.catch(err=>//..handle error)

Backend/Server:

USER_OBJECT:

user={
      user_type:"admin" || "default",
      user_name:...,
      user_age:...,
      .
      .
      .
      . 
}

And you can use UseEffect like this:

useEffect(() => {

//Todo

}, [])

You have given the right suggestion that if I have multiple admins it would be a problem. I will try the approach described by you. But for now, I have tried dependency array as well but it's still running infinitely. — Hamza Ilyas, Nov 02 '22 at 09:16
you can also try using this method, to get rid of your infinite loop, simply use an empty dependency array like so: `const [count, setCount] = useState(0); //only update the value of 'count' when component is first mounted useEffect(() => { setCount((count) => count + 1); }, []);` This will tell React to run `useEffect` on the first render. If still this issue persist, try looking into this post [here](https://stackoverflow.com/questions/53070970/infinite-loop-in-useeffect) — , Nov 02 '22 at 10:09

How to Stop useEffect running infinitely when using useNavigate inside it

3 Answers3