title: Setting a react state in callback does not work as expected
body: <p>I am making barcode reading app. I use <code>Quaggajs</code> and <code>Reactjs</code>.<br/>
  Quaggajs has a function <code>Quagga.onDetected(callback)</code>, the <code>callback</code> has one parameter <code>result</code>. The <code>result</code> is containing the detected barcode. I am having a react state (<code>const [count, setCount] = useState(0);</code>) in which I am counting the detected barcodes. The problem is that when I use <code>setCount(count + 1)</code> in the <code>callback</code> the <code>count</code> variable is allways it's initial value (<code>0</code>) so every time onDetect the setCount is setting the new value to be 1.</p>
  
  <p>Here is an example of the functional react component I use(I think that there is no problem getting the count and setCount from the props of ):</p>
  
  <pre><code>const Body = ({setCount, count, ...rest }) =&gt; {
  
      const start = () =&gt; {
          Quagga.init({
              inputStream: {
                  name: "Live",
                  type: "LiveStream",
                  constraints: {
                      facingMode: "environment",
                  },
                  area: {
                      top: "30%",
                      bottom: "30%"
                  }
              },
              locate: false,
              frequency: 50,
              decoder: {
                  readers: [
                      // "code_128_reader",
                      "ean_reader",
                      // "ean_8_reader",
                      // "code_39_reader",
                      // "code_39_vin_reader",
                      // "codabar_reader",
                      // "upc_reader",
                      // "upc_e_reader",
                      // "i2of5_reader"
                  ],
                  debug: {
                      showCanvas: true,
                      showPatches: true,
                      showFoundPatches: true,
                      showSkeleton: true,
                      showLabels: true,
                      showPatchLabels: true,
                      showRemainingPatchLabels: true,
                      boxFromPatches: {
                          showTransformed: true,
                          showTransformedBox: true,
                          showBB: true
                      }
                  }
              },
  
          }, function (err) {
              if (err) {
                  console.log(err);
                  return
              }
  
              console.log("Initialization finished. Ready to start");
              Quagga.start();
          });
  
          Quagga.onProcessed(function (result) {
              var drawingCtx = Quagga.canvas.ctx.overlay,
                  drawingCanvas = Quagga.canvas.dom.overlay;
  
              if (result) {
                  if (result.boxes) {
                      drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
                      result.boxes.filter(function (box) {
                          return box !== result.box;
                      }).forEach(function (box) {
                          Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
                      });
                  }
  
                  if (result.box) {
                      Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
                  }
  
                  if (result.codeResult &amp;&amp; result.codeResult.code) {
                      Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
                  }
              }
          });
  
          Quagga.onDetected((result) =&gt; {
              if (result &amp;&amp; result.codeResult &amp;&amp; result.codeResult.startInfo &amp;&amp; result.codeResult.startInfo.error &lt; 0.03) {
                  console.log("Sould change")
                  setCount(count + 1);
              }
          });
      }
  
      const stop = () =&gt; { Quagga.stop(); }
  
  
      useEffect(() =&gt; {
          start();
          console.log("CHANGE BODY");
          return () =&gt; {
              stop();
          }
      }, [])
  
      return (
          &lt;Grid container justify="center"&gt;
              &lt;div id="interactive" className="viewport" style={{ position: 'unset', width: '100vw', height: "100vh" }}&gt;
                  &lt;video src=""&gt;&lt;/video&gt;
                  &lt;canvas class="drawingBuffer"&gt;&lt;/canvas&gt;
              &lt;/div&gt;
          &lt;/Grid&gt;
      )
  }
  </code></pre>