React infinite loop in ComponentDidUpdate

Question

I'm running into an issue with my code, I am brand new to React. I am making a simple app where users can log workouts. I have a workout component on my user profile page that I want to render when a user updates his/her workout log. The following code below does the trick, but unfortunately it keeps rendering in an infinite loop. I cannot figure out how to set this conditional so it only renders once with each update.

componentDidUpdate(prevProps, prevState) {
  if (prevProps.workouts !== this.props.workouts) {
    this.props.requestUser(this.props.match.params.userId);
  }
}

Users reducer -

const usersReducer = (state = {}, action) => {
  Object.freeze(state)
  let newState;

  switch(action.type) {
    case RECEIVE_ALL_USERS:
      newState = merge({}, state, action.users);
      return newState;
    case RECEIVE_USER:
      const member = merge({}, action.user);
      member.workouts = Object.keys(action.user.workouts)
      newState = merge({}, state, { selected: member } );
      return newState;
    case RECEIVE_WORKOUT:
      const newWorkout = merge({}, state.selected.workouts, action.workout)
      newState = merge({}, state, newWorkout);
      return newState;
    default:
      return state;
  }
}

Is your `props.requestUser` function anyhow changing the value of `props.workouts`? Because in that case it will go in infinite loop. — Prakash Sharma, Aug 24 '17 at 19:17
@Prakashsharma I added my users reducer as it'd be easier to see there. — hancho, Aug 24 '17 at 19:24
@AustinStehling issue is in the way you are comparing two objects, compare the properties. — Mayank Shukla, Aug 24 '17 at 19:31
Possible duplicate of [Object comparison in JavaScript](https://stackoverflow.com/questions/1068834/object-comparison-in-javascript) — Mayank Shukla, Aug 24 '17 at 19:31

score 1 · Answer 1 · answered Aug 24 '17 at 20:37

1

Your workouts is an object. You cannot compare two objects because it's two different objects, so these objects are not equal which is true. So, you can use something like this:

componentDidUpdate(prevProps, prevState) {
  if (JSON.stringify(prevProps.workouts) !== JSON.stringify(this.props.workouts)) {
    this.props.requestUser(this.props.match.params.userId);
  }
}

this comparison is rough and depends on an order of keys but should work, also you can use some kind of a deep comparison: Object comparison in JavaScript

answered Aug 24 '17 at 20:37

Alex Borodin

1,555
12
26

I think that's the worst way to compare two objects. [`_.isEqual`](https://lodash.com/docs/#isEqual) could be a way better choice. – rishat Aug 24 '17 at 20:49
Yes, it may be better, if it is not an only place where we need such comparison. Loading the whole library for 1 line of code is not good practice too. – Alex Borodin Aug 24 '17 at 20:53

React infinite loop in ComponentDidUpdate

1 Answers1