0

MERN Stack application with Login and Register working properly.

On opening dashboard ("/" path), it dispatches "getWallets" 3 times, instead of 1:

Dashboard.jsx :

useEffect(() => {
    if (isError) {
      console.log(message)
    }

    if (!user) {
      navigate("/login")
    }

    else {
      dispatch(getWallets())
    }

    return () => {
      dispatch(reset())
    }
  }, [user, navigate, isError, message, dispatch])

redux devTools

It also dispatches "getWalletData" 9 times instead of one (since I only have 1 wallet atm).

TestWalletsData.jsx (component inserted on Dashboard.jsx):

    useEffect(() => {
        if (isError) {
            console.log(message)
        }

        if (wallets.length > 0 && walletsData.length <= wallets.length) {
            wallets.forEach(wallet => {
                dispatch(getWalletData(wallet))
                dispatch(reset())
            })
        }

        return () => {
            dispatch(reset())
        }
    }, [wallets, wallets.length, walletsData, isError, message, dispatch])

At this point the application is running ok since I don't permit another object to get pushed to the state if it's already there enter image description here, but since I'm using a limited rate API to get wallets data this isn't the road I want to path.

I'm assuming the issue arrives with the re-rendering of components and the wrong use of useEffect, but I just don't know how to fix it.

I've tried setting the environment to production as suggested by this comment but everything stays the same. https://stackoverflow.com/a/72301433/14399239

PS: Never worked with React Redux or Redux for that matter before trying it out on this project. Tried to follow a tutorial logic and apply it on my use case but having serious difficulties.


EDIT

Managed to solve the issue by removing the React.StrictMode !

0 Answers0