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

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 : )