diff --git a/js/components/Visualizer.tsx b/js/components/Visualizer.tsx
index 107b297f..33f517db 100644
--- a/js/components/Visualizer.tsx
+++ b/js/components/Visualizer.tsx
@@ -4,6 +4,7 @@ import * as Actions from "../actionCreators";
 import * as Selectors from "../selectors";
 import { useTypedSelector, useActionCreator } from "../hooks";
 import VisualizerInner from "./VisualizerInner";
+import { VISUALIZERS } from "../constants";
 
 const PIXEL_DENSITY = 2;
 const BAR_WIDTH = 3 * PIXEL_DENSITY;
@@ -115,6 +116,16 @@ function Visualizer(props: Props) {
 
   const width = renderWidth * PIXEL_DENSITY;
   const height = renderHeight * PIXEL_DENSITY;
+  const bufferLength = useMemo(() => {
+    switch (style) {
+      case VISUALIZERS.OSCILLOSCOPE:
+        return props.analyser.fftSize;
+      case VISUALIZERS.BAR:
+        return props.analyser.frequencyBinCount;
+      default:
+        return 0;
+    }
+  }, [props.analyser.fftSize, props.analyser.frequencyBinCount, style]);
 
   const bgCanvas = useMemo(() => {
     return preRenderBg(
@@ -159,11 +170,7 @@ function Visualizer(props: Props) {
   );
 
   const paintOscilloscopeFrame = useCallback(
-    (
-      canvasCtx: CanvasRenderingContext2D,
-      bufferLength: number,
-      dataArray: Uint8Array
-    ) => {
+    (canvasCtx: CanvasRenderingContext2D, dataArray: Uint8Array) => {
       props.analyser.getByteTimeDomainData(dataArray);
 
       canvasCtx.lineWidth = PIXEL_DENSITY;
@@ -201,7 +208,7 @@ function Visualizer(props: Props) {
       }
       canvasCtx.stroke();
     },
-    [colors, height, props.analyser, renderWidth, width]
+    [bufferLength, colors, height, props.analyser, renderWidth, width]
   );
 
   const innerProps = {
@@ -217,6 +224,7 @@ function Visualizer(props: Props) {
     barCanvas,
     printBar,
     paintOscilloscopeFrame,
+    bufferLength,
   };
   return <VisualizerInner {...innerProps} {...props} />;
 }
diff --git a/js/components/VisualizerInner.js b/js/components/VisualizerInner.js
index 0dbcb878..22da0686 100644
--- a/js/components/VisualizerInner.js
+++ b/js/components/VisualizerInner.js
@@ -89,14 +89,14 @@ class VisualizerInner extends React.Component {
     // update.
     this.props.analyser.fftSize = 2048;
     if (this.props.style === VISUALIZERS.OSCILLOSCOPE) {
-      this.bufferLength = this.props.analyser.fftSize;
-      this.dataArray = new Uint8Array(this.bufferLength);
+      this.dataArray = new Uint8Array(this.props.bufferLength);
     } else if (this.props.style === VISUALIZERS.BAR) {
-      this.bufferLength = this.props.analyser.frequencyBinCount;
-      this.dataArray = new Uint8Array(this.bufferLength);
+      this.dataArray = new Uint8Array(this.props.bufferLength);
 
       if (!this.octaveBuckets) {
-        this.octaveBuckets = octaveBucketsForBufferLength(this.bufferLength);
+        this.octaveBuckets = octaveBucketsForBufferLength(
+          this.props.bufferLength
+        );
       }
     }
   }
@@ -105,11 +105,7 @@ class VisualizerInner extends React.Component {
     switch (this.props.style) {
       case VISUALIZERS.OSCILLOSCOPE:
         this.canvasCtx.drawImage(this.props.bgCanvas, 0, 0);
-        this.props.paintOscilloscopeFrame(
-          this.canvasCtx,
-          this.bufferLength,
-          this.dataArray
-        );
+        this.props.paintOscilloscopeFrame(this.canvasCtx, this.dataArray);
         break;
       case VISUALIZERS.BAR:
         this.canvasCtx.drawImage(this.props.bgCanvas, 0, 0);