// New class RenderStream extends Component { subscription currentStream // more state needed, see below static getDerivedStateFromProps() { // here I would like to set up subscription // but can't attach a listener as there is no 'this' } render() { // render is harder to reason about: // - this.state.value might not yet be known // (imagine it is an object, then the render func would become more complex to avoid NPE) // - the subscription at this point might be from // a different stream then which we received the value from // // to fix the latter, we could set up subscription as render side effect, // but, yucky. return <div>Current value: {this.state.value}</div> } componentDidMount() { this.subscribeToStream(this.props.stream) } componentDidUpdate(prevProps) { if (prevProps.stream !== this.props.stream) { this.subscription.dispose() this.subscribeToStream(this.props.stream) } } subscribeToStream(stream) { this.currentStream = this.props.stream this.subscription = this.props.stream.subscribe(value => { this.setState({ value }) } } }