Subscription Is Hard?

SubscriptionIsHard.js

class SubscriptionDoneRight extends Component {
  state = {
    data: Store.read(props.id)
  }

  getDerivedStateFromProps(props, state) {
    return {
      data: Store.read(props.id),
    };
  }

  handleData = (data) => {
    this.setState({ data });
  }

  componentDidMount() {
    this._subscription = Store.subscribe(this.props.id, this.handleData);
    let currentData = Store.read(this.props.id);
    if (this.state.data !== currentData) {
      this.setState({ data: currentData });
    }
  }

  componentDidUpdate(oldProps) {
    if (oldProps.id !== this.props.id) {
      Store.unsubscribe(this._subscription);
      this._subscription = Store.subscribe(this.props.id, this.handleData);
      let currentData = Store.read(this.props.id);
      if (this.state.data !== currentData) {
        this.setState({ data: currentData });
      }
    }
  }

  componentWillUnmount() {
    Store.unsubscribe(this._subscription);
  }

  render() {
    return <div>{this.state.data}</div>
  }
}

The explanation: there are two bugs potential bugs, not present here because it's done :

• willMount (whatever, we don't have it)
• if there's a read in state initialization, then without https://gist.github.com/sebmarkbage/a2ed9dc5146604b7a122d446b0987cb2#file-subscriptionishard-js-L17 state goes stale

Great example. Maybe it should be documented somewhere more visible for anyone attempting to bridge subscriptions systems. It acts as a thorough checklist.

Should this call this.setState({data: sub.read(newProps.id)}) in componentWillReceiveProps?

Also, would a store update that occurs in between render and cDM have any negative effects? I guess it depends on the relative priorities.

Updated with some fixes and removed prefetching for now since that requires a cache and is a bit complicated to get right on its own.

Cross-linking to https://gist.github.com/bvaughn/d569177d70b50b58bff69c3c4a5353f3