CODEWITHSUNDEEP
reactjsreduxreact-redux
Sean D
Sean D

Reputation: 4292

React.js: How to check after a props update?

I have 4 form fields which a user can select or enter a value into, to advance to the next step. Here is one of those fields:

<Form.Field
  control={Checkbox}
  checked={this.props.donationCheckbox10}
  label='$10'
  value={10}
  onChange={() => {
    this.props.dispatchUpdateStateData('', 'donationInputField');
    this.props.dispatchUpdateStateData(!this.props.donationCheckbox10, 'donationCheckbox10');
    this.clearTheOtherCheckboxes(10);
    console.log(store.getState());
    this.checkIfReadyToAdvance();
  }}
/>

As you can see, it dispatches some actions to update a Redux store and then does a check to see if the user can advance.

The issue is that the advance condition always misses because the props have not updated and rerendered yet. At least I think this is the issue based on logging this.checkIfReadyToAdvance() (The getState() call returns the updated values because it doesn't wait for a rerender)

I believe componentWillUpdate() is being deprecated. What is the modern way to run a function after a Redux store updates the component?

Here is checkIfReadyToAdvance()

checkIfReadyToAdvance() {
    if (
      this.props.donationCheckbox10 ||
      this.props.donationCheckbox25 ||
      this.props.donationCheckbox50 ||
      this.props.donationInputField
    ) {
      this.setState({
        canNotAdvance : false
      });
      console.log("ready");
    } else {
      this.setState({
        canNotAdvance : true // in case all values are falsey again
      });
      console.log("not ready");
    }
  }

Upvotes: 0

Views: 142

Answers (1)

Sulthan
Sulthan

Reputation: 130092

There is little reason to store derived information unless the calculation of that information is performance heavy.

isReadyToAdvance() {
   const { props } = this;

   return
      props.donationCheckbox10 ||
      props.donationCheckbox25 ||
      props.donationCheckbox50 ||
      props.donationInputField;
}

and then just use !this.isReadyToAdvance() instead of this.state.canNotAdvance.

Technically, you could also use componentWillUpdate (deprecated) to update your state or the new getDerivedStateFromProps.

Upvotes: 1

Related Questions