diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js index f86d44eb1..0b0f4d325 100644 --- a/client/coral-framework/components/Slot.js +++ b/client/coral-framework/components/Slot.js @@ -4,16 +4,15 @@ import styles from './Slot.css'; import {connect} from 'react-redux'; import {getSlotElements} from 'coral-framework/helpers/plugins'; import omit from 'lodash/omit'; -import union from 'lodash/union'; import isEqual from 'lodash/isEqual'; +import {getShallowChanges} from 'coral-framework/utils'; class Slot extends React.Component { shouldComponentUpdate(next) { // Prevent Slot from rerendering when only reduxState has changed and // it does not result in a change of slot children. - const keys = union(Object.keys(this.props), Object.keys(next)); - const changes = keys.filter((key) => this.props[key] !== next[key]); + const changes = getShallowChanges(this.props, next); if (changes.length === 1 && changes[0] === 'reduxState') { const prevChildrenUuid = this.getChildren(this.props).map((child) => child.type.talkUuid); const nextChildrenUuid = this.getChildren(next).map((child) => child.type.talkUuid); @@ -49,7 +48,7 @@ class Slot extends React.Component { } Slot.propTypes = { - fill: React.PropTypes.string + fill: React.PropTypes.string.isRequired }; const mapStateToProps = (state) => ({ diff --git a/client/coral-framework/utils/index.js b/client/coral-framework/utils/index.js index 63dfd7dc4..2b4b6378f 100644 --- a/client/coral-framework/utils/index.js +++ b/client/coral-framework/utils/index.js @@ -1,5 +1,6 @@ import {gql} from 'react-apollo'; import t from 'coral-framework/services/i18n'; +import union from 'lodash/union'; import {capitalize} from 'coral-framework/helpers/strings'; export const getTotalActionCount = (type, comment) => { @@ -184,3 +185,8 @@ export function getSlotFragmentSpreads(slots, resource) { export function isCommentActive(commentStatus) { return ['NONE', 'ACCEPTED'].indexOf(commentStatus) >= 0; } + +export function getShallowChanges(a, b) { + return union(Object.keys(a), Object.keys(b)) + .filter((key) => a[key] !== b[key]); +}