Table does not re-render when using redux for pageSize

// myTable.js

class MyTable extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.pageSize}</h1>
        <ReactTable
          data={this.props.data} // not from redux
          columns={this.props.columns} // not from redux
          pageSize={this.props.pageSize} // from redux
        />
      </div>
    );
  }
}

const mapStateToProps = state => ({ pageSize: state.pageSize });

export default connect(mapStateToProps, null)(MyTable);

// customTable.js

class CustomTable extends React.Component {
  componentWillMount() {
    this.props.loadData();
  }
  render() {
    const columns = [...];
    return (
      <MyTable data={this.props.data} columns={columns} />
    );
  }
}

const mapStateToProps = state => ({ data: state.something });
const mapDispatchToProps = dispatch => ({ loadData: () => { dispatch(loadSomething()); } });

export default connect(mapStateToProps, mapDispatchToProps)(CustomTable);

Note that the value inside <h1> changes, but the table does not re-render. If I map the pageSize in CustomTable and send it down as a normal prop, it works. The problem occurs when I have a container inside a container.

[redlock]

Had the same issue. solved it by adding a key to the child component to force rendering: <ReactTable key={this.props.uniqueKey} ...

in you sandbox example adjust it as follows: <ReactTable key={this.props.pageSize} ...

[ghost]

I see. I am happy with @redlock 's solution for now. Thanks!