In my react application, I have the following code on the dashboard component.
const DashboardPage = ({ user, profile, getAuthProfileStart }: IProps) => {
useEffect(() => {
getAuthProfileStart();
}, []);
Dashboard container has been wrapped with the withSpinner HOC like this.
import { connect } from 'react-redux';
import { compose } from 'redux';
import { WithSpinner } from 'components/ui';
import Dashboard from './dashboard.page';
import { IReduxState } from 'types/reducer.types';
import * as alertActions from 'redux/alert/alert.actions';
import * as profileActions from 'redux/profile/profle.actions';
const mapStateToProps = ({
auth: { user },
profile: { authProfile, profileFetching },
}: IReduxState) => ({
user,
profile: authProfile,
isLoading: profileFetching,
});
const actions = {
startAlert: alertActions.startAlert,
getAuthProfileStart: profileActions.getAuthProfileStart,
};
export default compose(connect(mapStateToProps, actions), WithSpinner)(Dashboard);
This is the WithSpinner component.
import React from 'react';
import './with-spinner.styles.scss';
const WithSpinner = (WrappedComponent: any) => {
const Spinner = ({ isLoading, ...otherProps }: IProps) => {
return isLoading && WrappedComponent ? (
<div className='spinner-overlay'>
<div className='spinner-container' />
</div>
) : (
<WrappedComponent {...otherProps} />
);
};
return Spinner;
};
interface IProps {
isLoading: boolean;
}
export default WithSpinner;
Now the issue is, when the dashboard page loads, isLoading becomes true. Then the loader is displayed. Once the saga is completed, isLoading becomes false. Then the component is displayed. Then again the useEffect is called and the getAuthProfileStart
action is dispatched.This happens as a loop. How should I check if the profile on redux is changed or not inside the useEffect? Am I doing this the wrong way? Is it a good idea to check if the prevProps.profile !== nextProps.profile
inside useEffect?