This gist has been written on GitHub in the gist editor so it's not working code. However, I hope it conveys the idea.

example.jsx

const cache = require('./shared-cache');

// Using the simple-cache-provider.
const ItemFetcher = createFetcher(/** some fetcher **/);

class ItemList extends React.component {
  render() {
    // Load all available items.
    const items = ItemFetcher.read(cache);
    return <p>{this.props.items.join(", ")}</p>;
  }
}

class ItemCreator extends React.component {
  handleSubmit() {
    createItemOnServer(this.state.value, (id) => this.setState({submittedId: id}));
  }
  
  render () {
    let submitted = null;
    if (this.state.submittedId) {
      const item = ItemFetcher.read(cache, this.state.submittedId);
      submitted = <div>Created {item}</div>
    }
    
    return (
      <>
        {submitted}
        <form onSubmit={() => this.handleSubmit()}>
          <input type={'text'} name={'item'} onChange={/** Managed component into this.state.value **/} />
        </form>
      </>
    );
  }
}
  
const App = () => {
  return (
    <div>
      <A />
      <B />
    </div>
  );
}

React.render($("#root"), <App />);

The idea is that there's component A that uses React Suspense to load a list of items. Component B allows the user to add an item and then updates the cache to include this new item. However, component A does not have a subscription to this cache so it's not updated.

In previous React versions this data would be passed through a Redux store that would take care of triggering a re-render after the data store was changed. The loading would then also have been managed by Redux.

If we want to make the component owner of the data (and specify what's loaded there) then how do we ensure that if our data changes the other element is also updated? My idea would be to pass in the cached data as a prop (e.g. using the redux connect pattern). However, then I think the B component would get rendered twice when an item is added (once because the promise resolves so the data is available and then again because the shared state is updated).

I guess this is the problem of how to update an element after cache invalidation with the added question of "if we can update a component after cache invalidation, how do we ensure that if that component invalidates the cache it's not updated twice".

The idea is that there's component A that uses React Suspense to load a list of items. Component B allows the user to add an item and then updates the cache to include this new item. However, component A does not have a subscription to this cache so it's not updated.

That's not how cache works afaik. You can't update something in it and "not have subscription".

If you update something you invalidate the cache. So then on next render the other component will suspend because the cache has changed.

This part is still WIP and exact APIs are not clear yet.

That's not how cache works afaik. You can't update something in it and "not have subscription".

I understood that and would solve it by subscribing the component to the data but I feel like this creates a loop (Component requests data -> receives data -> receives data again because it was subscribed to the data that is now loaded).

The final summary would probably be: "How would we handle the case where a load in render of a component affects the props passed to that component or vice versa?"

I guess I'll have to wait for more examples on this later : )