why zoom in and zoom out not working first time in react js?

Question

Could you please tell me why zoom in and zoom out button not working first time.when I click button first time it not zoom in and not zoom out why ?

Here is my code https://codesandbox.io/s/o4o98kwy0y

zoomIn = () => {
  console.log("zoom in");
  const { currentAngle, currentScale, zoomDelta } = this.state;
  const c = currentScale + zoomDelta;
  this.setState(state => ({
    ...state,
    currentScale: c
  }));
  this.drawImage();
};

zoomOut = () => {
  console.log("zoom in");
  const { currentAngle, currentScale, zoomDelta } = this.state;
  const c = currentScale - zoomDelta;
  this.setState(state => ({
    ...state,
    currentScale: c
  }));
  this.drawImage();
};

Answer 1

It is because you are setting state and immediately drawing the image,

What you need is setState callback, Here is an example of it

zoomOut = () => {
  console.log("zoom in");
  const { currentAngle, currentScale, zoomDelta } = this.state;
  const c = currentScale - zoomDelta;
  this.setState(state => ({
    ...state,
    currentScale: c
  }), () => {
    this.drawImage();
  });
};

Updated code in your link