diff --git a/client/coral-framework/components/IfSlotIsEmpty.js b/client/coral-framework/components/IfSlotIsEmpty.js
index 424a59bc7..e9211fc57 100644
--- a/client/coral-framework/components/IfSlotIsEmpty.js
+++ b/client/coral-framework/components/IfSlotIsEmpty.js
@@ -3,13 +3,36 @@ import {connect} from 'react-redux';
 import {isSlotEmpty} from 'coral-framework/helpers/plugins';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
+import {getShallowChanges} from 'coral-framework/utils';
 
-function IfSlotIsEmpty({slot, className, reduxState, component: Component = 'div', children, ...rest}) {
-  return (
-    <Component className={className}>
-      {isSlotEmpty(slot, reduxState, rest) ? children : null}
-    </Component>
-  );
+class IfSlotIsEmpty extends React.Component {
+
+  shouldComponentUpdate(next) {
+
+    // Prevent Slot from rerendering when only reduxState has changed and
+    // it does not result in a change.
+    const changes = getShallowChanges(this.props, next);
+    if (changes.length === 1 && changes[0] === 'reduxState') {
+      return this.isSlotEmpty(this.props) !== this.isSlotEmpty(next);
+    }
+
+    // Prevent Slot from rerendering when no props has shallowly changed.
+    return changes.length !== 0;
+  }
+
+  isSlotEmpty(props = this.props) {
+    const {slot, className: _a, reduxState, component: _b = 'div', children: _c, ...rest} = props;
+    return isSlotEmpty(slot, reduxState, rest);
+  }
+
+  render() {
+    const {className, component: Component = 'div', children} = this.props;
+    return (
+      <Component className={className}>
+        {this.isSlotEmpty() ? children : null}
+      </Component>
+    );
+  }
 }
 
 IfSlotIsEmpty.propTypes = {
diff --git a/client/coral-framework/components/IfSlotIsNotEmpty.js b/client/coral-framework/components/IfSlotIsNotEmpty.js
index 3a41fffbd..e7a0e83ce 100644
--- a/client/coral-framework/components/IfSlotIsNotEmpty.js
+++ b/client/coral-framework/components/IfSlotIsNotEmpty.js
@@ -3,13 +3,36 @@ import {connect} from 'react-redux';
 import {isSlotEmpty} from 'coral-framework/helpers/plugins';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
+import {getShallowChanges} from 'coral-framework/utils';
 
-function IfSlotIsNotEmpty({slot, className, reduxState, component: Component = 'div', children, ...rest}) {
-  return (
-    <Component className={className}>
-      {!isSlotEmpty(slot, reduxState, rest) ? children : null}
-    </Component>
-  );
+class IfSlotIsNotEmpty extends React.Component {
+
+  shouldComponentUpdate(next) {
+
+    // Prevent Slot from rerendering when only reduxState has changed and
+    // it does not result in a change.
+    const changes = getShallowChanges(this.props, next);
+    if (changes.length === 1 && changes[0] === 'reduxState') {
+      return this.isSlotEmpty(this.props) !== this.isSlotEmpty(next);
+    }
+
+    // Prevent Slot from rerendering when no props has shallowly changed.
+    return changes.length !== 0;
+  }
+
+  isSlotEmpty(props = this.props) {
+    const {slot, className: _a, reduxState, component: _b = 'div', children: _c, ...rest} = props;
+    return isSlotEmpty(slot, reduxState, rest);
+  }
+
+  render() {
+    const {className, component: Component = 'div', children} = this.props;
+    return (
+      <Component className={className}>
+        {this.isSlotEmpty() ? null : children}
+      </Component>
+    );
+  }
 }
 
 IfSlotIsNotEmpty.propTypes = {