diff --git a/addons/knobs/src/components/types/Array.js b/addons/knobs/src/components/types/Array.js
index 88b6b987568..28e2851dd37 100644
--- a/addons/knobs/src/components/types/Array.js
+++ b/addons/knobs/src/components/types/Array.js
@@ -10,7 +10,11 @@ function formatArray(value, separator) {
   return value.split(separator);
 }
 
-class ArrayType extends React.PureComponent {
+class ArrayType extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
+  }
+
   handleChange = e => {
     const { knob } = this.props;
     const { value } = e.target;
diff --git a/addons/knobs/src/components/types/Color.js b/addons/knobs/src/components/types/Color.js
index 3956949af4f..0d3521f8611 100644
--- a/addons/knobs/src/components/types/Color.js
+++ b/addons/knobs/src/components/types/Color.js
@@ -19,7 +19,7 @@ const Popover = styled('div')({
   zIndex: '2',
 });
 
-class ColorType extends React.PureComponent {
+class ColorType extends React.Component {
   state = {
     displayColorPicker: false,
   };
@@ -27,6 +27,9 @@ class ColorType extends React.PureComponent {
   componentDidMount() {
     document.addEventListener('mousedown', this.handleWindowMouseDown);
   }
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
+  }
   componentWillUnmount() {
     document.removeEventListener('mousedown', this.handleWindowMouseDown);
   }
diff --git a/addons/knobs/src/components/types/Date/index.js b/addons/knobs/src/components/types/Date/index.js
index 6e46a3b56cb..edb8ffbb656 100644
--- a/addons/knobs/src/components/types/Date/index.js
+++ b/addons/knobs/src/components/types/Date/index.js
@@ -8,7 +8,11 @@ import style from './styles';
 
 const DateInput = styled(Datetime)(style);
 
-class DateType extends React.PureComponent {
+class DateType extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
+  }
+
   handleChange = date => {
     const value = date.valueOf();
     this.props.onChange(value);
diff --git a/addons/knobs/src/components/types/Number.js b/addons/knobs/src/components/types/Number.js
index 9441401a9bc..8936baeaec0 100644
--- a/addons/knobs/src/components/types/Number.js
+++ b/addons/knobs/src/components/types/Number.js
@@ -32,7 +32,11 @@ const RangeWrapper = styled('div')({
   width: '100%',
 });
 
-class NumberType extends React.PureComponent {
+class NumberType extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
+  }
+
   handleChange = event => {
     const { value } = event.target;
 
diff --git a/addons/knobs/src/components/types/Text.js b/addons/knobs/src/components/types/Text.js
index 04e2687f723..594b3c35907 100644
--- a/addons/knobs/src/components/types/Text.js
+++ b/addons/knobs/src/components/types/Text.js
@@ -3,7 +3,11 @@ import React from 'react';
 
 import { Textarea } from '@storybook/components';
 
-class TextType extends React.PureComponent {
+class TextType extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
+  }
+
   handleChange = event => {
     const { value } = event.target;
     this.props.onChange(value);