Skip to content

Specifying mergeProps causes impure connected components to not update #337

Closed
@DouglasLivingstone

Description

@DouglasLivingstone

When an impure connected component is re-rendered due to its parent's state changing, its shouldComponentUpdate returns true, but if a non-default mergeProps is supplied then checkMergedEquals will also be true, causing the component to only update if its nextMergedProps have changed from the previous mergedProps.

In this JSFiddle example, I would expect the root component's setState to trigger a re-render of the PartComponent and both of the impure components, but since the second impure component has a custom mergeProps, it doesn't update.

let store = Redux.createStore(() => ({}))

class PartComponent extends React.Component {
  render() {
    return <span>{ new Date().getTime() }</span>
  }
}

const Impure_DefaultMerge_Connected_PartComponent = ReactRedux.connect(
    null, null, null, { pure: false }
)(PartComponent)

const Impure_CustomMerge_ConnectedPartComponent = ReactRedux.connect(
    null, null, () => ({}), { pure: false }
)(PartComponent)

const Pure_DefaultMerge_ConnectedPartComponent = ReactRedux.connect(
    null, null, null, { pure: true }
)(PartComponent)

const Pure_CustomMerge_ConnectedPartComponent = ReactRedux.connect(
    null, null, () => ({}), { pure: true }
)(PartComponent)

class RootComponent extends React.Component {
  render() {
    return <div>
        <PartComponent /> PartComponent <br />
        <Impure_DefaultMerge_Connected_PartComponent /> Impure_DefaultMerge_Connected_PartComponent <br />
        <Impure_CustomMerge_ConnectedPartComponent /> Impure_CustomMerge_ConnectedPartComponent <br />
        <Pure_CustomMerge_ConnectedPartComponent /> Pure_CustomMerge_ConnectedPartComponent <br />
        <Pure_DefaultMerge_ConnectedPartComponent /> Pure_DefaultMerge_ConnectedPartComponent <br />
      </div>
  }
  componentDidMount() {
    setInterval(() => this.setState({}), 777)
  }
}

ReactDOM.render(
  <ReactRedux.Provider store={store}>
    <RootComponent />
  </ReactRedux.Provider>,
  document.getElementById('container')
)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions