React api difference

a_old-react-api.js

// Example component: render the current value of a stream. Support switching streams during the lifecycle of the component
// N.B. code is untested

// Old:
class RenderStream extends Component {
	subscription

	componentWillMount() {
		this.subscribeToStream(this.props.stream)
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.stream !== nextProps.stream) {
			this.subscription.dispose()
			this.subscribeToStream(nextProps.stream)
		}
	}

	render() {
		return <div>Current value: {this.state.value}</div>
	}

	componentWillUnmount() {
		this.subscription.dispose()
	}

	subscribeToStream(stream) {
		// assumption: subscribe triggers immediately
		this.subscription = this.props.stream.subscribe(value => {
			this.setState({ value })
		}
	}
}

b_new-react-api.js

// 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 })
		}
	}
}

@JReinhold, thanks for pointing out, updated the gist