0

Could anyone can help me, because i can't understand why HOC is causing ifnite loop while I am using it on container. That's my container:

class UserContainer extends Component {
  componentDidMount() {
    const { onValuePassedThroughParams, match } = this.props;

    const { user } = match.params;
    if (user !== '') {
      onValuePassedThroughParams(user);
    }
  }

  render() {
    const { user } = this.props;
    return (
      <UserView user={user} />
    );
  }
}

const UserContainerWithLoading = LoaderHOC(UserContainer);

const mapStateToProps = state => ({
  user: state.user,
});

const mapDispatchToProps = dispatch => ({
  onValuePassedThroughParams: val => dispatch(takeUserNameAndFetchData(val)),
});

export default
withRouter(
  connect(mapStateToProps, mapDispatchToProps)(UserContainerWithLoading),
);

my HOC:

const LoaderHOC = WrappedComponent => props =>{

  return(
  props.user.isLoading
    ? <div className={styles.ldsHourglass} />
    : <WrappedComponent {...props} />
)};

and also a thunk:

function fetchData(url) {
  return (
    fetch(url)
      .then(result => result.json())
  );
}

export default function takeUserNameAndFetchData(name) {
  const userInfoUrl = `https://api.github.com/users/${name}`;
  const userRepoUrl = `https://api.github.com/users/${name}/repos`;

  return (dispatch) => {
    dispatch(fetchUserBegin());
    Promise.all([
      fetchData(userInfoUrl),
      fetchData(userRepoUrl),
    ])
      .then(([info, repos]) => {
        dispatch(fetchUserInfoSucces(info));
        dispatch(fetchUserReposSuccess(repos));
        dispatch(fetchUserLoadingEnd());
      })
      .catch((err) => {
        console.log(`ERROR!${err}`);
        dispatch(fetchUserError());
      });
  };
}

When I use an HOC on my View component everything is fine and it's stop geting data from the server, but when I am using it on container there is always an infinite loop. Do you have any advice for me?

0 Answers0