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
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.
React 18 had some problems with the version of react-redux <= 7.2.7, so make sure you update that to 7.2.8 or the new react-redux 8 beta (which is specificaly designed for React 18)