Search code examples
javascriptreactjsreduxnext.jsuse-effect

redux is not re-rendering component with React 18

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

Solution

  • 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)