asynchronous context change is not propagated to the connected components

[zdila]

Please see the following example. The only difference between Bar and ConnectedBaz is that the second one uses redux connect.

The problem is that the context changes do not get propagated to the component Baz and it statically renders 0. Cmponent Bar is being updated and re-rendered correctly every second.

import React, {PropTypes} from 'react';
import { connect } from 'react-redux';

class Bar extends React.Component {
  static contextTypes = {
    time: React.PropTypes.number
  };

  render() {
    return <div>{this.context.time}</div>;
  }
}

class Baz extends React.Component {
  static contextTypes = {
    time: React.PropTypes.number
  };

  render() {
    return <div>{this.context.time}</div>;
  }
}

const ConnectedBaz = connect()(Baz);

export default class Foo extends React.Component {
  static childContextTypes = {
    time: React.PropTypes.number
  };

  getChildContext() {
    return {
      time: this.state ? this.state.time : 0
    };
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({time: new Date().getTime()});
    }, 1000);
  }

  render() {
    return <div><Bar/><ConnectedBaz/></div>;
  }
}

[gaearon]

Yes, this is a known React issue.
There are a few possible fixes:

• Don’t rely on context updates propagating correctly and instead expose something like subscribeToMyThing() in context. (This is pretty much what React Redux does by the way.)
• Pass { pure: false } as the fourth argument to connect(). This will significantly slow it down but context changes will propagate.
• Wait for React to fix this or help them to 😉