Updating component state without triggering infinite re-render with componentDidUpdate

Question

So my app has a table with data from the main page. If the user navigates to another page, input some data, then presses Home to go back to the main page, the table should be updated accordingly.

I'm trying to use componentWillUpdate() to re-render the page, but it causes an infinite loop of requests with the server.

class Dashboard extends Component{
  constructor(props){
    super(props);
    this.state = {
     table: null
    }
  }
  componentWillMount(){
    this.props.retrieveDashboard();
  }

  componentWillUpdate(nextProps, nextState){
   nextProps.retrieveDashboard();
   if (nextProps.users !== this.props.users){
     this.setState({
      table: nextProps.users
     });
   }
}



function mapStateToProps(state){
  return {
    users: state.auth.dash
  };
}

export default connect(mapStateToProps,actions)(Dashboard);

I tried putting in a conditional to make sure it won't update then re-render a million times, but the conditional doesn't seem to do anything. Any idea?

EDIT: users is an array of JSON objects like this: [{object1}, {object2}]

This is the code for retrieveDashboard():

export function retrieveDashboard(){
  return function(dispatch){
    axios.get(`${SERVER_URL}/dashboard`)
         .then(response => {
           dispatch({type: USERS, payload: response.data});
          })
         .catch(() => console.log("error"))
  }
}

I was under the impression that the data in the store is only updated by the axios call and dispatch, so I have to call it again if the database has been modified.

Most probably issue is the `if (nextProps.users !== this.props.users)` which is not necessarily how you want to compare two objects. Assuming this.props.users is an object. Perhaps check this: https://stackoverflow.com/questions/201183/how-to-determine-equality-for-two-javascript-objects. In our react projects, we have a preference for using lodash.js (https://lodash.com/) _.isEqual() functionto do deep comparisons of objects. — Finbarr O'B, Jul 19 '17 at 15:11
What happens in retrieveDashboard ? Can you share code. Why are you retreiving with a callback ? Just pass it down as a prop. — Fawaz, Jul 19 '17 at 15:20
Any particular reason you are using redux, but not keeping the state of `table` in your store? Like @Fawaz said, you could just pass this down as a prop in your mapStateToProps. — Kyle Richardson, Jul 19 '17 at 15:22
Calling retrieveDashboard in WillUpdate is causing an infinite loop because the retrieveDashboard itself is causing another update. Your conditional check isn't working, as the above comment says. This is not an ideal way to handle your table data. — JakeD, Jul 19 '17 at 15:23
The state of the `table` is kept in store, but when the user navigates back to the dashboard (which was already rendered in a previous view), the data isn't updated until the page is refreshed. That's why I was trying to call retrieveDashboard() again to get the new data into the dashboard reducer. — Drew Tran, Jul 19 '17 at 15:39

score 0 · Answer 1 · answered Jul 19 '17 at 15:24

So you are comparing two different object instances using !==, and this is not the correct way to compare objects in javascript. You want to do a shallow, or a deep compare of the objects. See the link I posted in my comment: How to determine equality for two JavaScript objects?

As I also mentioned, we like to use lodash.js _.isEqual() for comparing objects.

Updating component state without triggering infinite re-render with componentDidUpdate

1 Answers1