My react app homepage refreshes because of useEffect-CodePudding

Here i am trying to get user Info from redux state to the homepage after signing in but the problem is that the component refreshes and lose all the redux data stored because of the useEffect hook, tand i can't use the checkUser() method which retreive user data without that hook because it cause an infinite rendering probleme and ruin the app. So can you help me get the data from redux state without refreshing the component.

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { checkUser } from '../../actions/userActions';
import { connect } from 'react-redux';
import './main.css';



function Main(props){


    const [loggedIn, setLoggedIn] = useState(false)

    useEffect(() => {
        props.checkUser();
        setLoggedIn(props?.user?.isLoggedIn)
    },[checkUser])

    useEffect(() => {
        console.log(loggedIn)
    }, [loggedIn])
    


    let menuOpened = false;

    const menuToggle = (element) => {
        element.preventDefault();
        let menuButton = document.querySelector('.menu-btn');
        let responsiveMenu = document.querySelector('.toggle-menu');

        if(!menuOpened){
            menuButton.classList.add('open');
            responsiveMenu?.classList.add('opened');

        }else if(menuOpened){
            menuButton.classList.remove('open');
            responsiveMenu?.classList.remove('opened');
        }
        menuOpened = !menuOpened ;
    }

    const search = (e) => {
        e.preventDefault();
    }


    return ( 
        <div>
            <h1 id='Title'>Your favorite<br></br>Gifts shop</h1>
        
            <nav id='navbar'>
                <div className='menu-btn' onClick={menuToggle}>
                    <div className='menu-btn-burger'></div>
                </div>
                <ul className='toggle-menu'>
                    <li className="toggle-menu-items">
                        <Link className='toggle-menu-anchors' {...(loggedIn ? {to:'/user-profile'} : {to:'/user-form'})}>Profile</Link>
                    </li>
                    <li className="toggle-menu-items">
                        <Link className='toggle-menu-anchors' to='/cart'>Cart</Link>
                    </li>
                    <li className="toggle-menu-items">
                        <Link className='toggle-menu-anchors' to='/support'>Support</Link>
                    </li>
                </ul>
                <ul>
                    <li className='menu' id='menu1'><Link className='anchor-menu' {...(loggedIn ? {to:'/user-profile'} : {to:'/user-form'})}>Profile</Link></li>
                    <li className='menu' id='menu2'><Link className='anchor-menu' to='/cart'>Cart</Link></li>
                    <li className='menu' id='menu3'><Link className='anchor-menu' to='/support'>Support</Link></li>
                </ul>
                <form id='mainForm'>
                    <input id='mainInput'/>
                    <button id='search' onClick={search}>search</button>
                </form>
            </nav>
        </div>
    );

    
}


const mapUserStateToProps = (state) => {
    return{
        user : state?.myUser || [],
    }
}






export default connect(mapUserStateToProps, {checkUser})(Main);

CodePudding user response：

Why do you have a function as a dependancy for the first useEffect. I think you should have props.user as the dependency instead if we want the state to change when the user object changes:

  useEffect(() => {
        props.checkUser();
        setLoggedIn(props?.user?.isLoggedIn)
    },[props?.user])

CodePudding user response：

    useEffect(() => {
        props.checkUser();
        setLoggedIn(props?.user?.isLoggedIn)
    },[checkUser])

Replace above code with below code

    // this useEffect to get user data
    useEffect(() => {
        props.checkUser();
    },[]);

    // this useEffect to set isLoggedIn flag
    useEffect(() => {
        setLoggedIn(props?.user?.isLoggedIn)
    },[props?.user]);