I have a custom hook which handles global data fetching based on user authentication. the hook is like this:

const userState = useSelector(state => state.user.state)

useEffect(() => {
    if(userState === "authenticated") doSomething()
    if(userState === "unauthenticated") doSomething()
    if(userState === "loading") doSomething()
}, [userState])

but since I am using React 18 strict mode (in NextJS), the useEffect only runs twice with userState === "loading" value and won't run when state updates.

I'm not sure if I should give more details of my code. If you need, tell me and I will edit the question. thanks

CodePudding user response：

Please, check wheather the dependency variable is changing(updating) or not..

CodePudding user response：

In React 18 with strict mode , after component mounts ,React immediately simulates unmounting and remounting the component (only in development environment) check react docs

I assume removing the strict mode will fix your problem . in order to have consistent code and preventing unsafe lifecycles from happening, use next lint instead.