I am relatively new to ReactJS and I'm building an app with a Context. At some point I need to get one of the values from the Context, make it available for editing and only after it's submitted change it's value in the Context (to avoid refreshing all the other components). I thought of doing something like this:

export default class AComponent extends Component<any, { property?: Property }> {
  public constructor(props: any) {
    super(props);
  }

  public shouldComponentUpdate(nextProps: any, nextState: { property?: Property }) {
    return nextState.property !== this.state.property;
  }

  public render(): JSX.Element {
    return (
      <AContext.Consumer>
        {(data) => {
          // ...
          this.setState({ ...this.state, property: data.property });
          // ...    
        }}
      </AContext.Consumer>
    );
  }
}

But even with the shouldComponentUpdate check, it still refreshes 4 times! Without it it produces an error (recursion limit reached or something like that).

The question is: What's the correct way of working with a context property without changing it until the moment you actually want to?

I wanted to get the Context property inside the constructor but I have found that this form is deprecated:

constructor(props: any, context: AContext) {
  super(props, context)
}

Is there any other way?