react/no-did-update-set-state linter rule alternative

Question

My Application is using React 15 and we are avoiding usages of componentWillReceiveProps in components(so that it is less work at time of migrating to React 16+). Keeping this in mind, the appropriate place to set State based on previous props is componentDidUpdate. But with linter rule react/no-did-update-set-state we are getting below error:

error Do not use setState in componentDidUpdate react/no-did-update-set-state

From the explanation given https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md, rule makes sense.

What is alternative(without disabling rule)... means where should we set state to abide by this rule?

Answer 1

You can try getDerivedStateFromProps.

  static getDerivedStateFromProps(props, state) {
    if (props.value) {
      return { ...state, value: props.value };
    }
    return state;
  }

In this case if you will receive new value from props, it will be applied to your state.
But react has this hook only with version 16.
In v15 you have to do it with componentWillReceiveProps or componentDidUpdate + setState. There is no other ways.