How to redirect inside UseEffect

Question

Instead of useHistory I am trying to use navigate. But it's always showing me React Hook useEffect has missing dependencies: 'navigate' and 'setUser'. Either include them or remove the dependency array

useEffect(() => {

    auth.onAuthStateChanged(async (user) => {
        if(user) {
             setUser(user);
             navigate('/home');
        }
        
    })
}, [userName,setUser, navigate]);

const handleAuth = () => {
    auth.signInWithPopup(provider).then((result) => {
        setUser(result.user);
    }).catch((error) => {
        alert(error.message);
    })
}

const setUser = (user) => (
    dispatch(setUserLoginDetails({
        name: user.displayName,
        email: user.email,
        photo: user.photoURL,
    }))
)

code sandbox link: https://codesandbox.io/s/misty-morning-1h37q6?file=/src/countdown.jsx

if you inspect element, and check the logs, you will see that it is running on the background.

Any help will be appreciated.

score 0 · Answer 1 · answered Jul 27 '22 at 12:16

0

How to fix missing dependency warning when using useEffect React Hook explains it better then I could.

You should also return a cleanup function at the end of useEffect

answered Jul 27 '22 at 12:16

nilskch

307
3
10

Mridul Gupta · Answer 2 · 2022-07-27T16:28:32.407

0

According to convention, you have to include everything that you are using inside useEffect as a dependency, so if any of the dependency changes it'll trigger a re-render. In your case, you are using setUser and navigate

setUser(user);
navigate('/home');

So to avoid the warning add them to the dependency array, and since the navigate function is defined by react their address won't change no matter how many times the component re-renders but since setUser is defined by you, it has to be wrapped with useCallback so that the function doesn't get re-defined every time the component re-renders and trigger the useEffect.

So change your code too,

const setUser = useCallback( (user) => (
    dispatch(setUserLoginDetails({
        name: user.displayName,
        email: user.email,
        photo: user.photoURL,
    }))
), [])
auth.onAuthStateChanged((user) => {
        if(user) {
             setUser(user);
             navigate('/home');
        }
        
    })
}, [userName, setUser, navigate]);

And you should never declare your callback function as async, because if you do so you won't be able to return a cleanup function

So if your useEffect code should look something like this

useEffect(() => {
  const user = async () => {}

  user.then().catch() // if you want to change the state or show error message

  return () => {} // you can also return a cleanup function if you are using timeout or intervals and want to clear the previous timeout or intervals
}, [dependencies])

edited Jul 27 '22 at 16:28

answered Jul 27 '22 at 12:21

Mridul Gupta

807
1
6
8

I tried to do like you have written but it's showing me error setUser' was used before it was defined my whole code I am chaning above. – Smita Mahata Jul 27 '22 at 12:53
1

@SmitaMahata Put the useEffect below where you define setUser() – Matt Jul 27 '22 at 12:57
Either move the setUser code above useEffect or move down the useEffect code below setUser – Mridul Gupta Jul 27 '22 at 13:01
i had already done all those things. Anyother redirection function or trick if you can think.The 'setUser' function makes the dependencies of useEffect Hook (at line 45) change on every render. To fix this, wrap the definition of 'setUser' in its own useCallback() Hook. If i am setting usecallback it's showing dispatch error. – Smita Mahata Jul 27 '22 at 15:51
Is it showing u have to add dispatch as a dependency or what ? – Mridul Gupta Jul 27 '22 at 16:29
Yes it is showing this error React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array – Smita Mahata Jul 28 '22 at 06:19
@Matt I did that still it's an issue – Smita Mahata Jul 28 '22 at 06:19
So include dispatch as well – Mridul Gupta Jul 28 '22 at 13:07

How to redirect inside UseEffect

2 Answers2