CODEWITHSUNDEEP
javascriptreactjsreduxnext.jsuse-effect
Arash Jahan Bakhshan
Arash Jahan Bakhshan

Reputation: 1160

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

Upvotes: 1

Views: 1388

Answers (2)

phry
phry

Reputation: 44236

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)

Upvotes: 3

Moein Moeinnia
Moein Moeinnia

Reputation: 2341

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.

Upvotes: 0

Related Questions